HTML CSS examples for CSS Widget:Menu Dropdown
Centering Navbar with panel like dropdown menu
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> li:hover {<!--from ww w. j a v a 2 s . c o m--> background-color:Chartreuse; padding:17px .2px; border-top-left-radius:6px; border-top-right-radius:6px; } .subcategory { display:none; width:1032px; height:201px; background-color:yellow; color:blue; position:absolute; border-bottom-left-radius:6px; border-bottom-right-radius:6px; margin-top:16px; } li:hover .subcategory { display:block; } #navbar { border-bottom-left-radius:6px; border-bottom-right-radius:6px; border-top-left-radius:6px; border-top-right-radius:6px; background-color:pink; text-align:center; font-family:Arial, Helvetica, sans-serif; margin-left:auto; margin-right:auto; } #navbar ul { list-style-type:none; color:OrangeRed; padding:0px; display:inline-block; vertical-align:top; *display:inline; *zoom:2; border:2px solid grey; } #navbar ul li { display:inline; } #navbar ul li a { padding:0 2.6em; text-decoration:none; } ol { list-style-type:none; float:left; display:block; } .contentwrapper { margin-top:11px; margin-bottom:11px; height:181px; width:201px; background-color:BlueViolet; position:relative; color:Chartreuse; } a:link { color:yellow; text-decoration:none; } a:visited { color:blue; text-decoration:none; } a:hover { color:pink; text-decoration:none; } </style> </head> <body> <div id="navbar"> <ul> <li> <a href="#">Lorem ip</a> <div class="subcategory"> <div class="contentwrapper"> <ol> Lorem </ol> <ol> Lorem </ol> <ol> Lorem </ol> <ol> Lorem </ol> <ol> Lorem </ol> <ol> Lorem </ol> <ol> Lorem </ol> <ol> Lorem </ol> <ol> Lorem </ol> <ol> Lorem </ol> </div> </div> </li> <li> <a href="#">Lorem ip</a> <div class="subcategory"></div> </li> <li> <a href="#">Lorem ip</a> <div class="subcategory"></div> </li> <li> <a href="#">Lorem ip</a> <div class="subcategory"></div> </li> <li> <a href="#">Lorem ip</a> <div class="subcategory"></div> </li> <li> <a href="#">Lorem ip</a> <div class="subcategory"></div> </li> <li> <a href="#">Lorem ip</a> <div class="subcategory"></div> </li> <li> <a href="#">Lorem ip</a> <div class="subcategory"></div> </li> <li> <a href="#">Lorem ip</a> <div class="subcategory"></div> </li> </ul> </div> </body> </html>