HTML CSS examples for CSS Widget:Menu Dropdown
Drop Down Menu in CSS with round corner
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .main_menu<!--from w w w. java 2 s . c om--> { margin-top:0px; margin-bottom:11px; text-align:center; } .main_menu ul { margin:0px; list-style:none; display:inline-block; } .main_menu li { margin-right:6px; width:100px; text-align:center; display:inline-block; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; border:2px solid Chartreuse; position:relative; } .main_menu ul.nav-child { display:none; position:absolute; top:21px; left:0; padding:0; } .main_menu ul li:hover .nav-child { display:block; } </style> </head> <body> <div class="main_menu"> <div class="moduletable_menu"> <ul class="nav menu"> <li class="item-101 current active"> <a href="/index.php">Lore</a> </li> <li class="item-105"> <a href="/index.php/project">Lorem i</a> </li> <li class="item-103 deeper parent"> <a href="/index.php/partners">Lorem ip</a> <ul class="nav-child unstyled small"> <li class="item-111"> <a href="/index.php/partners/czech-republic">Lorem ipsum do</a> </li> <li class="item-109"> <a href="/index.php/partners/belgium">Lorem i</a> </li> <li class="item-113"> <a href="/index.php/partners/germany">Lorem i</a> </li> <li class="item-112"> <a href="/index.php/partners/iceland">Lorem i</a> </li> <li class="item-110"> <a href="/index.php/partners/norway">Lorem </a> </li> </ul> </li> <li class="item-102 deeper parent"> <a href="/index.php/meetings">Lorem ip</a> <ul class="nav-child unstyled small"> <li class="item-114"> <a href="10-14-09-2014-czech-republic">Lorem ipsum dolor sit amet, con</a> </li> <li class="item-115"> <a href="11-13-12-2014-belgium">Lorem ipsum dolor sit am</a> </li> <li class="item-116"> <a href="19-21-03-2015-germany">Lorem ipsum dolor sit am</a> </li> <li class="item-117"> <a href="25-08-31-08-2015-iceland">Lorem ipsum dolor sit amet</a> </li> <li class="item-118"> <a href="26-28-11-2015-czech-republic">Lorem ipsum dolor sit amet, con</a> </li> <li class="item-119"> <a href="10-13-03-2016-norway">Lorem ipsum dolor sit a</a> </li> <li class="item-120"> <a href="22-29-05-2016-belgium">Lorem ipsum dolor sit am</a> </li> </ul> </li> <li class="item-106"> <a href="/index.php/activities">Lorem ipsu</a> </li> <li class="item-107"> <a href="/index.php/press">Lorem</a> </li> <li class="item-104"> <a href="/index.php/downloads">Lorem ips</a> </li> <li class="item-108"> <a href="/index.php/contacts">Lorem ip</a> </li> </ul> </div> </div> </body> </html>