HTML CSS examples for CSS Widget:Menu Dropdown
Dropdown menu when hovering on button
<html lang="en"> <head> <title>Lorem ipsum do</title> <style> body {<!-- w ww . ja v a 2 s .c om--> margin:0; padding:0; } .dropdown { position:relative; display:inline-block; } .dropbtn { background-color:Chartreuse; color:yellow; font-family:arial; padding:31px; border:none; cursor:pointer; } .dropdown-content { display:none; position:absolute; background-color:blue; color:pink; z-index:2; min-width:161px; } .dropdown-content a { color:OrangeRed; background-color:grey; display:block; } .dropdown-content a:hover { background-color:BlueViolet; } .dropdown:hover>.dropdown-content { display:block; } .container:hover .button { background-color:Chartreuse; } </style> </head> <body translate="no"> <div class="dropdown"> <button class="dropbtn">Lorem</button> <div class="dropdown-content"> <a href="#">Lore</a> <a href="#">Lore</a> <a href="#">Lor</a> </div> </div> </body> </html>