CSS only menus

I have seen a few examples of this before, but none of them have ever really worked perfectly for me – so I created my own, as seen on this site’s drop downs. But then I was asked by my brother-in-law for some help doing something similar, but rather than use javascript, I stuck with CSS. Here’s how it works:

You use Lists to build the menu.

Then in the CSS, you use the :hover pseudo element to trigger the display of the sub-menus.

#navigation {
background: blue;
position: relative;
z-index: 100;
top: 0px;
height: 32px;
color: white;
}
#navigation ul {
display: block;
margin: 0px;
padding: 0px;
text-indent: 0px;
height: 32px;
}
#navigation ul li {
display: block;
margin: 0px;
padding: 0px 10px;
text-indent: 0px;
height: 32px;
line-height: 32px;
float: left;
border-right: 1px solid white;
text-align: center;
}
#navigation ul li ul {
display: none;
width: 800px;
}
#navigation ul li:hover ul {
display: block;
position: absolute;
left: 0px;
}
#navigation ul li ul li {
}
#navigation ul li:hover ul li ul {
display: none;
}
#navigation ul li:hover ul li:hover ul {
display: block;
}

Check out the demo to see how it all works.

It functions correctly in Firefox, IE7+, Safari, and Chrome. IE6 support will require the inclusion of IE7.js

You may also like...

1 Response

  1. Mitch says:

    The link to the demo doesn’t work any more!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.