HTML CSS examples for CSS Widget:Menu Dropdown
Dropdown menu with hover background
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from w w w . ja va 2s .c om--> margin:0; } header { position:relative; width:81%; height:81px; padding:0; margin:0 auto; background:Chartreuse; max-width:1201px; } nav { position:absolute; top:0; right:0; width:auto; height:81px; padding:0; margin:0; } nav ul { padding:0; margin:0; } nav li { display:inline-block; zoom:2; *display:inline; _height:81px; list-style-type:none; } nav li a { display:block; height:81px; } nav li a:hover { background:yellow; } ul#menu, ul#menu ul.sub-menu { padding:0; margin:0; } ul#menu li, ul#menu ul.sub-menu li { list-style-type:none; margin:0; padding:0; } ul#menu li { width:auto; } ul#menu li a, ul#menu li ul.sub-menu li a { width:auto; text-decoration:none; color:blue; padding:0 16px; display:block; font-size:17px; } ul#menu li { position:relative; } ul#menu li ul.sub-menu { display:none; position:relative; left:0; width:auto; float:left; } ul#menu li:hover ul.sub-menu { display:block; } ul#menu li:hover ul.sub-menu li { position:relative; display:block; width:100%; background-color:pink; } ul#menu li:hover ul.sub-menu li a:hover { display:block; width:auto; color:OrangeRed; background-color:grey; } </style> </head> <body> <header> <nav> <ul id="menu"> <li> <a href="">Lorem ipsu</a> </li> <li> <a href="">Lorem ipsu</a> <ul class="sub-menu"> <li> <a href="">Lorem ips</a> </li> <li> <a href="">Lorem ips</a> </li> <li> <a href="">Lorem ips</a> </li> </ul> <!-- /.sub-menu --> </li> <li> <a href="">Lorem ipsum </a> </li> <li> <a href="">Lorem ipsum</a> </li> </ul> <!-- /#menu --> </nav> </header> </body> </html>