HTML CSS examples for CSS Widget:Menu Dropdown
Customize dropdown menu in CSS
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> ul#menu, ul#menu ul.sub-menu { font-family:Helvetica; background-color:Chartreuse; color:yellow; border-radius:4px 4px 4px 4px; font-size:13px; font-style:normal; font-weight:401; height:41px; line-height:40px; padding:0 21px; position:relative; text-align:center; vertical-align:bottom; border-radius:4px 4px 4px 4px; border-style:none none solid; border-width:0 0 2px; cursor:pointer; display:inline-block; float:center; list-style-type:none; text-decoration:none;<!-- w w w . j ava 2s. c om--> } ul#menu, ul.submenu { margin:0; padding:0; list-style:none; float:left; } ul#menu li { float:left; } li ul.submenu { display:none; } ul#menu li a { display:block; text-decoration:none; color:blue; padding:0 21px; background:black; float:right; border-radius:3px 3px 3px 3px; font-family:Helvetica; } ul.submenu a:hover { background:red; } ul#menu li:hover ul.submenu { display:block; position:absolute; float:right; } ul#menu li:hover li, ul#menu li:hover a { float:none; background:; } ul#menu li:hover li a:hover { opacity:0.10; } ul.submenu, ul.submenu>li { width:100%; } ul.submenu a:hover { background-color:pink; } </style> </head> <body> <ul id="menu"> <li> <a href="#">Lorem ipsum dolor </a> <ul class="submenu"> <li> <a href="#">Lorem ipsu</a> </li> <li> <a href="#">Lorem ipsu</a> </li> <li> <a href="#">Lorem ipsum </a> </li> </ul> </li> </ul> </body> </html>