HTML CSS examples for CSS Widget:Menu Dropdown
CSS Dropdown Menu dropping vertically
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #main_nav_list a.main_nav_active_item { background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat; font-family:Arial,sans-serif; font-style:normal; font-size:12px; font-weight:bold; text-decoration:none;<!-- w w w.ja v a2s .com--> } #main_nav_list a.main_nav_item { background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat; font-family:Arial,sans-serif; font-style:normal; font-size:12px; font-weight:bold; text-decoration:none; } #main_nav_list a.main_nav_item:hover { background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat; font-family:Arial,sans-serif; font-style:normal; font-size:12px; font-weight:bold; text-decoration:none; color:Chartreuse; } ul ul { display:none; list-style:none; float:left; } ul>li:hover>ul { position:absolute; display:block; } </style> </head> <body> <div id="main_nav_container"> <ul id="main_nav_list"> <li> <a class="main_nav_item" href="index.html">Lore</a> </li> <li> <a class="main_nav_item" href="history.html">Lorem i</a> </li> <li> <a class="main_nav_item" href="products.html">Lorem ip</a> <ul> <li> <a href="#">Lorem </a> </li> <li> <a href="#">Lorem </a> </li> <li> <a href="#">Lorem </a> </li> <li> <a href="#">Lorem </a> </li> <li> <a href="#">Lorem </a> </li> </ul> </li> <li> <a class="main_nav_item" href="news.html">Lore</a> </li> <li> <a class="main_nav_item" href="links.html">Lorem</a> </li> <li> <a class="main_nav_item" href="contact.html">Lorem i</a> </li> <ul> </ul> </ul> </div> </body> </html>