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:



CSS Chunks:
*{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;}

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

You may also read:  Create Simple Jquery Right Click Cross browser Vertical Menu

Wanna Download?

You may also like...

Leave a Reply

%d bloggers like this: