HTML CSS examples for CSS Widget:Menu Dropdown
Showing dropdown menu on button hover
<html> <head> <title> </title> <style> .dropbtn {<!-- w ww. j a va 2 s . c o m--> background-color:Chartreuse; color:yellow; padding:17px; font-size:17px; border:none; cursor:pointer; } .dropdown { position:relative; display:inline-block; } .dropdown-content { display:none; position:absolute; background-color:blue; min-width:161px; box-shadow:0px 9px 17px 0px pink; } .dropdown-content a { color:OrangeRed; padding:13px 17px; text-decoration:none; display:block; } .dropdown-content a:hover { background-color:grey; } .dropdown:hover .dropdown-content { display:block; } .dropdown:hover .dropbtn { background-color:BlueViolet; } </style> </head> <body> <div class="container"> <div class="dropdown"> <button class="dropbtn">Lor</button> <div class="dropdown-content"> <a href="#">Lorem</a> <a href="#">Lorem</a> <a href="#">Lorem</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Lore</button> <div class="dropdown-content"> <a href="#">Lorem </a> <a href="#">Lorem </a> <a href="#">Lorem </a> </div> </div> </div> </body> </html>