HTML CSS examples for CSS Widget:Menu Dropdown
Css drop down menu with hover effect
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- w ww . j a v a 2 s.c o m--> background:Chartreuse; } .Menu { text-align:center; } .Menu .main ul { display:none; } .Menu .main li:hover>ul { display:block; } .Menu .main { list-style:none; position:relative; display:inline-table; } .Menu .main:after { content:""; clear:both; display:block; } .Menu .main li { display:inline-block; } .Menu .main li a { display:block; padding:0px 11px; font:bold 14px/43px Arial, Helvetica, sans-serif; color:yellow; } .Menu .main ul { padding:0; background:blue; position:absolute; } .Menu .main ul li { display:block; } .Menu .main ul li a { padding:6px 16px; color:pink; } .Menu .main ul li a:hover { background:OrangeRed; } </style> </head> <body> <div class="menuBar"> <nav class="Menu"> <ul class="main"> <li> <a href="http://www.lombardisonthebay.com/" class="active">Lore</a> </li> <li> <a href="wedding.html">Lorem ip</a> <ul class="dropdown"> <li> <a href="wedding-gallery.html">Lorem i</a> </li> <li> <a href="testimonials.html">Lorem ipsum </a> </li> </ul> </li> <li> <a href="restaurant.html">Lorem ipsu</a> <ul> <li> <a href="restaurant-gallery.html">Lorem i</a> </li> </ul> </li> <li> <a href="social.html">Lorem ipsum dolor</a> </li> <li> <a href="corporate.html">Lorem ips</a> </li> <li> <a href="upcoming.html">Lorem ipsum dol</a> </li> <li> <a href="contact.html">Lorem ipsu</a> </li> <li> <a href="locations.html">Lorem ipsum d</a> </li> </ul> </nav> </div> </body> </html>