HTML CSS examples for CSS Widget:Menu Dropdown
Drop down menu hover state
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .btn {<!--from ww w. j a v a2 s. c o m--> display:block; width:69px; height:23px; padding-top:71px; font-weight:bold; float:left; padding-right:31px; text-align:center; } .btn { background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat -6px 0px; } .btn:hover { background-position:-6px -121px; } .btn:hover p { background-color:Chartreuse; } .menu ul li { list-style:none; } .menu { display:inline; float:left; padding-right:31px; padding:21px 0 0 21px; } a { text-decoration:none; color:yellow; } .menu ul li ul { display:none; background:blue; position:absolute; width:201px; color:pink; margin-top:91px; } .menu ul li:hover ul { display:block; padding:16px; line-height:31px; } .menu ul li a:hover { color:OrangeRed; } </style> </head> <body> <div class="menu"> <ul> <li> <div class="btn"> <p>Lorem</p> </div> <ul> <li> <a href="#">Lorem ips</a> </li> <li> <a href="#">Lorem ips</a> </li> </ul> </li> </ul> </div> </body> </html>