Rozwijane menu w css

Question

<nav id="topnav">
				 <ol> <!-- ul class="menu"-->
					<li><a href="#">Strona główna</a></li>
					<li><a href="#">Pierwszy raz tutaj?</a>
						<ul>
							<li><a href="#">Artykuły</a></li>
							<li><a href="#">Felietony</a></li>
							<li><a href="#">Rankingi</a></li>
							<li><a href="#">Recenzje</a></li>
						</ul>
					</li>
					<li><a href="#">Dlaczego filozofia?</a>
						<ul>
							<li><a href="#">Wstęp</a></li>
							<li><a href="#">Ważne pytania</a></li>
							<li><a href="#">Pasja</a></li>
						</ul>
					</li>
					<li><a href="#">O autorze</a>
						<ul>
							<li><a href="#">Kim jestem?</a></li>
							<li><a href="#">Curriculum Vitae</a></li>
							<li><a href="#">Biografia</a></li>
						</ul>
					</li>
					<li><a href="#">Kontakt</a></li>
				</ol>
			</nav>

#topnav
{
	background-color: #1c74b2;
	text-align: center;
	width: 100%;
}
/*.menu*/
ol
{
	list-style-type: none;
	margin: 0;
	padding: 10px;
	font-size: 18px;
	height: 38px;
	line-height: 200%;
	display: inline-block;
}
ol a
{
	color: #fff;
	text-decoration: none;
	display: block;
}
/*.menu*/
ol > li
{
	display: inline-block;
	padding-left: 20px;
	padding-right: 20px;
	border-right: 1px dashed #0a2b42;
}
/*.menu*/
ol > li:first-child
{
	border-left: 1px dashed #0a2b42;
}
/*.menu*/
/* --------------------------------------------------------------------------------------------------------------------------*/
ol > li:hover
{
	color: #0a2b42;
}
ol > li:hover > a
{
	color: #white;
}
/*.menu*/
ol > li > ul
{
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 40px;
	display: none;
	width: 150px;
}
/*.menu*/
ol > li:hover > ul
{
	display: block;
}
/*.menu*/
ol > li > ul > li 
{
	background-color: #1c74b2;       
	position: relative;
	z-index: 100;
	border-top: 1px dashed #0a2b42;
}
/*.menu*/
ol > li > ul > li:hover 
{
	background-color: #0b63a1; 
}
ol > li > ul > li:hover  > a
{
	color: #white;
}

Nie mam pojęcia gdzie leży błąd, ale zamiast rozwijanego menu otrzymuję coś takiego: 

Answer 1

ol > li > ul { 
   ...
   position: absolute;
}

https://learnlayout.com/position.html

btw zamieniłbym na twoim miejscu <ol> na <ul> (listę uporządkowaną na listę nieuporządkowaną) bo to jest menu i kolejność przycisków nie ma znaczenia pod względem semantycznym :P

@edit używaj nazw klas bo jak będziesz chciał wstawić gdzieś listę uporządkowaną to będziesz miał zonk xD

.menu .menu__list .menu__item .menu__drawer .menu__link etc :P

Comments

Ja bym jeszcze dodał, że nie warto robić tak długich, zagnieżdżonych selektorów 

---

@Tnifey, Dziękuję za odpowiedź, bardzo mi pomogłeś.

Mam jeszcze jeden problem. Nie wiem co zrobić, aby szerokość opcji w menu np. "Dlaczego filozofia?" automatycznie dostosowywały się do opcji rozwijanych np. "Wstęp".

Chciałbym, żeby szerokość opcji "Wstęp" sięgała od borderu do borderu itd.

---

@MateuszB W jaki inny sposób mógłbym wykonać rozwijane menu?

---

w `ol > li` masz paddingi i to powoduje takie wyświetlanie :P

jakby te paddingi były na ol > li > a to nie było by takiego problemu :P

i pamiętaj że a ma domyślnie display: inline więc musisz mu wrzucić display: block żeby zadziałały paddingi :P

@up: chodziło mu raczej o to żeby nazywać wszystko klasami i po prostu w stylach nie pisać tyle zagnieżdżeń     .greatgrandparent > .grandparent > .parent > .children

---

Poprawiłem to, ale nadal nie wiem czy można jakoś rozszerzyć/skrócić rozwijaną opcję "Wstęp", tak aby dla każdej opcji menu szerokość była identyczna.

Na razie wygląda to tak:

---

dodaj jeszcze do

ol > li {
    ...
    position: relative;
}

a do 

ol > li > ul {
    ...
    width: 100%;
}

 

---

Wszystko działa, dziękuję.