HTML CSS examples for CSS Widget:Menu Dropdown
CSS navigation drop down menu
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #wrap {<!--from www. j a v a2 s . c o m--> height:51px; margin:0; z-index:100; position:relative; } .navbar { height:51px; margin-top:8px; position:absolute; margin-left:143px; } .navbar li { height:auto; text-align:center; list-style:none; font-family:'Muli', sans-serif; text-transform:uppercase; font-size:14px; padding:0 16px 0 16px; margin:0; background-color:Chartreuse; } .navbar>li { float:left; } .navbar ul li { padding:0; } .navbar a { padding:11px 0; text-decoration:none; color:yellow; display:block; } .navbar li:hover, .navbar li a:hover, .navbar ul li a:hover { background-color:blue; color:pink; } .navbar li ul { display:none; height:auto; margin:0; padding:0; } .navbar li:hover ul { display:block; color:OrangeRed; } .navbar li ul li { background-color:grey; } .navbar li ul li a { border-left:2px solid BlueViolet; border-right:2px solid Chartreuse; border-top:2px solid yellow; border-bottom:2px solid blue; } .navbar li ul li a:hover { background-color:pink; color:OrangeRed; } </style> </head> <body> <div id="wrap"> <ul class="navbar"> <li>Lore</li> <li>Lorem <ul class="sub-menu"> <li>Lore</li> <li>Lore</li> <li>Lore</li> </ul> </li> <li>Lorem <ul class="sub-menu"> <li>Lore</li> <li>Lore</li> <li>Lore</li> <li>Lore</li> <li>Lore</li> <li>Lore</li> </ul> </li> <li>Lore</li> <li>Lore</li> </ul> </div> </body> </html>