HTML CSS examples for CSS Widget:Menu Bar
Center menubar on screen
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #navMenu {<!--from w w w . j a v a 2s . c o m--> margin:0; padding:0; text-align:center; } #navMenu ul { margin:0; padding:0; line-height:31px; display:inline-block; } #navMenu li { margin:0; padding:0; text-align:left; float:left; list-style:none; position:relative; background-color:Chartreuse; border-radius:6px; } #navMenu ul li a { text-align:center; text-decoration:none; height:31px; width:151px; display:block; color:yellow; border:2px solid blue; text-shadow:2px 2px 2px pink; } #navMenu ul ul { position:absolute; visibility:hidden; top:33px; } #navMenu ul li:hover ul { visibility:visible; } #navMenu li:hover { background-color:OrangeRed; } #navMenu ul li:hover ul li a:hover { background-color:grey; color:BlueViolet; } #navMenu a:hover { color:Chartreuse; } </style> </head> <body> <div id="navMenu"> <ul> <li> <a href="#">Lore</a> </li> <li> <a href="#">Lore</a> <ul> <li> <a href="#">Lorem ipsum dolor</a> </li> </ul> </li> <li> <a href="#">Lorem ip</a> <ul> <li> <a href="#">Lo</a> </li> <li> <a href="#">Lorem i</a> </li> <li> <a href="#">Lorem </a> </li> </ul> </li> <li> <a href="#">Lor</a> <ul> <li> <a href="#">Lorem i</a> </li> <li> <a href="#">Lorem</a> </li> </ul> </li> <li> <a href="#">Lorem ips</a> <ul> <li> <a href="#">Lorem ipsum</a> </li> <li> <a href="#">Lorem </a> </li> </ul> </li> </ul> </div> </body> </html>