Christian Christian - 21 days ago 7
CSS Question

horizontal navigationbar not working with width specified

I'm trying to create a horizontal navigationbar with css.

The strange thing is, that if I set a width for my

ol
tag, the horizontal float doesn't work. If I remove the
width
, it works as expected.

What does cause this issue?

CSS:

nav {
position: absolute;
height: 40px;
width: 100%;
top: 240px;
background-color: #8F8E93;
float: left;
}

nav ol {
width: 300px;
}


nav ol li {
float: left;
}

nav>ol>li>a {
display: block;
}


HTML:

<nav>
<ol>
<li><a href="reiseziele.html">Reiseziele</a></li>
<li><a href="kontakt.html">Kontakt</a>
<ol>
<li><a href="kontakt_mail.html">E-Mail</a></li>
<li><a href="kontakt_formular.html">Formular</a></li>
</ol>
</li>
</ol>
</nav>

Answer

You have to give width to li but be careful while giving with css selectors or else it will affect the inner li too.

and use this css for inner li to avoid float left so they can be act like sub menu.

nav ol li ol li{
  float:none !important;;
}

and for outer ol li

nav ol li {
    float: left;
    width:50%;
}

I have override the float:none to inner child so they can come in drop downlist.

See Demo

Note Always use clear:both after using float or else it will create white gap issue if width is not good enough.