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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<!DOCTYPE HTML> <html> <head> <title>CSS Drop Down Menu</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="menu"> <ul> <li><a href="#">Home</a> <ul> <li><a href="#">Has Submenu</a> <ul> <li><a href="#">Has Submenu</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> </ul> </li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Has Submenu</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> </ul> </li> <li><a href="#">Submenu 4</a></li> </ul> </li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Has Submenu</a> <ul> <li><a href="#">Has Submenu</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> </ul> </li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Has Submenu</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> </ul> </li> <li><a href="#">Submenu 4</a></li> </ul> </li> <li><a href="#">Submenu 4</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> </ul> </li> <li><a href="#">Portfolio</a></li> <li><a href="#">Clients</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
*{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;} |
