HTML CSS examples for CSS Widget:Menu Dropdown
Setting dropdown menu LI's background color
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #navi {<!--from w w w .j a v a 2 s .c om--> width:100%; height:41px; margin-top:11px; position:relative; background-color:Chartreuse; filter:alpha(opacity=76); font-family:'Russo One', sans-serif; z-index:100; } #navi ul { padding:0; margin:0; display:inline-table; text-align:center; position:relative; z-index:100; } #navi ul:after { content:""; clear:both; display:block; } #navi ul li { display:block; padding:11px 21px 12px 21px; list-style:none; position:relative; float:left; } #navi ul li a { font-size:13pt; color:yellow; text-transform:uppercase; } #navi ul li:hover { background-color:blue; } #navi ul li:first-child { margin-left:11px; } #navi ul li:last-child { margin-left:211px; } #navi ul ul { display:none; position:absolute; top:100%; left:0; background-color:pink; z-index:100; } #navi ul ul li { float:none; position:relative; font-size:12pt; } #navi ul ul li:first-child { margin:0; } #navi ul ul li:last-child { padding-bottom:11px; margin:0; } #navi ul li:hover>ul { display:block; z-index:100; } </style> </head> <body> <div id="navi"> <ul> <li> <a href="">L</a> </li> <li> <a href="">L</a> <ul> <li> <a>Lor</a> </li> <li> <a>Lor</a> </li> <li> <a>Lor</a> </li> </ul> </li> <li> <a href="">L</a> </li> <li> <a href="">L</a> </li> </ul> </div> </body> </html>