CODEWITHSUNDEEP
css
PeerBr
PeerBr

Reputation: 715

Horizontal, two-level navigation menu in CSS

I am building a two-level navigation menu for a website. Both levels will always be visible.

My problem: I would like to

Childlike ASCII art 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 cannot even get the 2nd level menu horizontal. But I can already see that long titles in the 2nd level menu push the last "about us" 1st level menu item out to the right, which looks ugly.

Any help is greatly appreciated!

Upvotes: 3

Views: 4896

Answers (1)

joeljoeljoel
joeljoeljoel

Reputation: 633

The key to not pushing the 1st level nav over is to put position: absolute; left: 0; on the 2nd level nav. You'll have to add position: relative; to li.sub-li

Upvotes: 2

Related Questions