HTML CSS examples for CSS Widget:Menu Dropdown
CSS navigation dropdown aligned
<html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> ul {<!--from w ww . j a v a2 s .c om--> list-style:none; width:auto; margin-left:auto; margin-right:auto; margin:0px; } ul li { display:block; position:relative; float:left; border:2px solid Chartreuse; } li ul { display:none; } ul li a { display:block; background:yellow; padding:6px 11px 6px 11px; text-decoration:none; white-space:nowrap; color:blue; } ul li a:hover { background:pink; } li:hover ul { display:block; position:absolute; right:-100px; } li:hover li { float:none; text-align:center; } li:hover a { background:OrangeRed; } li:hover li a:hover { background:grey; } #drop-nav li ul li { border-top:0px; } .hidden { position:absolute; left:-55%; } </style> </head> <body> <title>Lorem ipsum dol</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <ul id="menu"> <li> <a href="Home.html">Lore</a> </li> <li> <a href="#">Lorem ip</a> <ul class="hidden"> <li> <a href="Threading.html">Lorem ips</a> </li> <li> <a href="Waxing.html">Lorem </a> </li> <li> <a href="Mehndi.html">Lorem ipsum </a> </li> <li> <a href="Facial.html">Lorem </a> </li> </ul> </li> <li> <a href="Media.html">Lorem</a> </li> <li> <a href="Testimonial.html">Lorem ipsum</a> </li> <li> <a href="Career.html">Lorem </a> </li> <li> <a href="Client.html">Lorem </a> </li> <li> <a href="Contact.html">Lorem ipsu</a> </li> </ul> </body> </html>