HTML CSS examples for CSS Widget:Menu Dropdown
Dropdown Navigation Bar
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .toolbar ul {<!-- ww w . ja v a 2 s .co m--> margin:0; padding:0; list-style:none; } ul.toolsNav li { position:relative; float:left; } ul.toolsNav li a { display:block; } ul.toolsNav li a.link { vertical-align:baseline; margin:0 3px; outline:none; cursor:pointer; text-align:center; text-decoration:none; font:15px/100% Arial, Helvetica, sans-serif; padding:.6em 3em .56em; text-shadow:0 2px 2px Chartreuse; -webkit-border-radius:.6em; -moz-border-radius:.6em; border-radius:.6em; -webkit-box-shadow:0 2px 3px yellow; -moz-box-shadow:0 2px 3px blue; box-shadow:0 2px 3px pink; color:OrangeRed; border:2px solid grey; background:BlueViolet; background:-webkit-gradient(linear, left top, left bottom, from(Chartreuse), to(yellow)); background:-moz-linear-gradient(top, blue, pink); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='OrangeRed', endColorstr='grey'); } ul.toolsNav li a.link:hover { background:BlueViolet; background:-webkit-gradient(linear, left top, left bottom, from(Chartreuse), to(yellow)); background:-moz-linear-gradient(top, blue, pink); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='OrangeRed', endColorstr='grey'); } ul.toolsNav li.drop ul { display:none; position:absolute; left:0; } ul.toolsNav li.drop:hover ul { display:block; } ul.toolsNav li ul li { float:none; display:block; } ul.toolsNav li ul li a { border:2px solid BlueViolet; } </style> </head> <body> <div class="toolbar"> <ul class="toolsNav"> <li class="drop"> <a class="link" href="#url">Lorem</a> <ul class="toolsSubNav"> <li> <a href="#url">Lorem </a> </li> <li> <a href="#url">Lorem </a> </li> </ul> </li> <li> <a class="link" href="#url">Lorem </a> </li> <li> <a class="link" href="#url">Lore</a> </li> <li> <a class="link" href="#url">Lorem</a> </li> </ul> </div> </body> </html>