HTML CSS examples for CSS Widget:Menu Bar
make menu bar fixed and not moving when scrolling
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from w ww. j a va 2 s.c om--> background-color:Chartreuse; } #wrap { width:1021px; margin-left:auto; margin-right:auto; } #menu { background-color:yellow; height:41px; } #menu ul li { text-decoration:none; display:inline; position:relative; float:left; width:11%; } #menu ul li>ul { display:none; text-align:center; } #menu ul li ul li { width:100%; float:none; display:block; } #menu ul li a { text-decoration:none; padding:11px 21px 0px 21px; color:blue; background-color:pink; font-family:Arial; display:block; } #menu ul li a:hover { color:OrangeRed; font-weight:bold; } #menu li:hover ul { display:block; background-color:grey; } #middle { background-color:BlueViolet; height:100%; width:100%; border-color:Chartreuse; border-radius:6px; margin-top:51px; margin-bottom:51px; box-shadow:0 0 2px yellow; } #footer { background-color:blue; border:2px solid pink; border-radius:6px; height:201px; margin-bottom:0px; } </style> </head> <body> <div id="wrap"> <div id="menu"> <ul> <li> <a href="#">Lor</a> </li> <li> <a href="#">Lor</a> <ul> <li> <a href="#">Lor</a> </li> <li> <a href="#">Lorem</a> </li> </ul> </li> <li> <a href="#">Lorem</a> </li> <li> <a href="#">Lore</a> </li> <li> <a href="#">Lore</a> </li> </ul> </div> <div id="middle"></div> <div id="footer"></div> </div> </body> </html>