I am creating a two-level navigation menu for a website. Both levels will always be visible.
My problem: I would like
- Arrange the menu of the 1st and 2nd levels horizontally, occupying one line
- Align the sublevel menu to the left with the current active level 1 menu
- Do not place the sub-menu, click the remaining menu items of the 1st level on the right.
ASCII child illustration:
AAA BBBBBB CC DDD [1st level, B selected]
aa bbb ccccc [2nd level, options of B visible]
CSS:
.nav, .nav ul {list-style-type:none; margin:0; padding:0; float:left;}
.navl ul li ul li {}
.nav {margin-bottom:-1px;margin-right:-1px;}
.nav a {float:left; line-height:16px; padding:4px 0; border:1px solid #fff; margin-bottom:-1px;}
.nav ul {position:relative; clear:left;}
.nav ul li {float:left; clear:left;}
.nav a {position:relative;}
.sub-li a {margin-right:0;}
HTML:
<ul class="nav">
<li><a href="#url">Home</a></li>
</ul>
<ul class="nav">
<li class="sub-li"><a class="sub-a" href="#url">Library</a>
<ul>
<li><a href="#url">Opening hours</a></li>
<li><a href="#url">Librarians</a></li>
<li><a href="#url">Geeks</a></li>
</ul>
</li>
</ul>
<ul class="nav">
<li><a href="#url">About us</a></li>
</ul>
In this example, I can’t even get a horizontal menu of the second level. But I can already see that the long headers in the 2nd level menu push the last menu item "1 us" to the right, which looks ugly.
Any help is much appreciated!
source
share