<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: