Create multi level drop down menu in css

This is pretty simple to create a multi level drop down menu in css. But it’s true that it doesn’t have such flexibility that javascript have. And also the width of drop down section needs to be fixed, not flexible. Now a days css drop down menu is not widely used, but it is very useful to get clear concept of css inheritance.

Let’s look at the code:

Html chunks:

[html]

[/html]

CSS Chunks:
[css]
*{margin: 0; padding: 0;}
#menu{width:484px; margin: 0 auto; background-color: #000; height:25px;}
#menu ul{list-style-type:none;}
#menu ul li{float: left; position: relative;}
#menu ul li:hover{background-color: #999;}
#menu ul li a{color: #fff; padding: 0 30px; line-height:25px; font-size:11px; font-family:arial; display: block; text-decoration:none;}
#menu ul li a:hover{background-color: #999;}
#menu ul li ul li{float: none; position: relative;}
#menu ul li ul{position: absolute; top:25px; left:0; display: none; background-color: #000; width:150px;}
#menu ul li:hover > ul{display: block;}
#menu ul li ul li a{white-space: nowrap; line-height:25px;}
#menu ul li ul li ul{position: absolute; top:0; left:145px; display: none; background-color: #000; width:150px;}
[/css]

Pretty simple, huh? Why don’t you look at the demo?

Wanna Download?