HTML CSS examples for CSS Widget:Menu Hover
HTML 5 navigation menu showing on hover
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> header {<!--from www .j a va2s. co m--> background-color:Chartreuse; padding:16px; } .logo { font-size:41px; color:yellow; display:inline; margin-left:31px; } .SocialMediaLinks { display:inline; margin-left:1101px; } .SocialMediaLinks li { list-style-type:none; display:inline-block; font-size:41px; color:blue; } .SocialMediaLinks li a { padding:8px; } .SocialMediaLinks a:link { text-decoration:none; color:pink; } .SocialMediaLinks a:visited { text-decoration:none; color:OrangeRed; } .SocialMediaLinks a:hover { background-color:grey; border-radius:6px; } body { margin:0px; background-color:BlueViolet; } .NavigationSection { background-color:Chartreuse; padding:6px; margin-bottom:100px; position:relative; z-index:10000; } .MainMenu li { position:relative; list-style-type:none; font-size:21px; display:inline-block; margin-right:31px; color:yellow; } .MainMenu li a { padding:6px; } .MainMenu a:link { text-decoration:none; color:blue; } .MainMenu a:visited { text-decoration:none; color:pink; } .MainMenu a:hover { background-color:OrangeRed; border-radius:6px; } .MainMenu li .SubMenu li { list-style-type:none; margin:0; } .MainMenu li .SubMenu { position:absolute; left:0; top:100%; display:none; } .MainMenu li:hover { position:relative; } .MainMenu li:hover .SubMenu { display:block; } </style> </head> <body> <title>Lorem ipsum dolo</title> <header> <h1 class="logo">Lorem </h1> <ul class="SocialMediaLinks"> <li> <a href="#">L</a> </li> <li> <a href="#">L</a> </li> <li> <a href="#">Lo</a> </li> </ul> </header> <nav class="NavigationSection"> <ul class="MainMenu"> <li> <a href="#">Lorem ipsum dolo</a> </li> <li> <a href="#">Lorem ipsum</a> </li> <li> <a href="#">Lorem ip</a> </li> <li> <a href="#">Lorem ipsum do</a> <ul class="SubMenu"> <li>Lorem </li> <li>Lorem </li> <li>Lorem </li> <li>Lorem </li> <li>Lorem </li> </ul> </li> <li> <a href="#">Lorem ipsu</a> </li> <li> <a href="#">Lore</a> </li> <li> <a href="#">Lorem ips</a> </li> <li> <a href="#">Lorem i</a> </li> </ul> </nav> </body> </html>