HTML CSS examples for CSS Widget:Menu Dropdown
Dropdown menus showing properly
<html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <!-- ww w . j a va 2 s .c o m--> <body> <title>Lorem ipsum dolor sit amet, </title> <style type="text/css"> ul { padding:0; list-style:none; background:Chartreuse; } ul li { display:inline-block; position:relative; line-height:22px; text-align:left; } ul li a { display:block; padding:9px 26px; color:yellow; text-decoration:none; } ul li a:hover { color:blue; background:pink; } ul li ul.dropdown { min-width:100%; background:OrangeRed; display:none; position:absolute; z-index:1000; left:0; } ul li:hover ul.dropdown { display:block; } ul li ul.dropdown li { display:block; } </style> <ul> <li> <a href="#">Lore</a> </li> <li> <a href="#">Lorem</a> </li> <li> <a href="#">Lorem ipsu</a> <ul class="dropdown"> <li> <a href="#">Lorem i</a> </li> <li> <a href="#">Lorem ip</a> </li> <li> <a href="#">Lorem ip</a> </li> </ul> </li> <li> <a href="#">Lorem i</a> </li> </ul> </body> </html>