HTML CSS examples for CSS Widget:Menu Dropdown
Menu bar with icon and dropdown
<html> <head> <title>Lorem ipsum dol</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css"> <style id="compiled-css" type="text/css"> nav {<!--from www . ja v a 2 s.c o m--> display:none; margin:0px; padding:0px; border:0px; font-size:0px; } li { display:none; margin:0px; padding:0px; border:0px; font-size:0px; list-style:none; } ul { display:none; margin:0px; padding:0px; border:0px; font-size:0px; list-style:none; } nav { display:block; border-top:2px solid Chartreuse; border-bottom:2px solid yellow; box-shadow:0px 0px 5px -3px blue; } nav>ul { display:block; } nav>ul>li { display:inline-block; } nav>ul>li>a { line-height:33px; } nav>ul>li:hover>a { background-color:pink; color:OrangeRed; } nav>ul>li>ul { display:none; position:absolute; overflow:hidden; background-color:grey; border-top:3px solid BlueViolet; border-bottom:2px solid Chartreuse; border-left:2px solid yellow; border-right:2px solid blue; border-radius:0px 0px 5px 5px; box-shadow:0px 3px 3px -2px pink; width:135px; } nav>ul>li:hover>ul { display:block; } nav>ul>li>ul>li { display:block; } nav>ul>li>ul>li:hover>a { background-color:OrangeRed; } a { font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal; font-style:normal; text-decoration:none; } a.menu { color:grey; display:block; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:normal; font-style:normal; padding-left:15px; padding-right:15px; text-decoration:none; } a.submenu { color:BlueViolet; display:block; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:normal; font-style:normal; padding-left:15px; padding-right:15px; text-decoration:none; } </style> </head> <body> <nav> <ul> <li> <a class="menu" href="#"> <i class="fa fa-home" aria-hidden="true"></i>Lorem </a> </li> <li> <a class="menu" href="#"> <i class="fa fa-bars" aria-hidden="true"></i>Lorem ipsu</a> <ul> <li> <a class="submenu" href="#Product1">Lorem ipsu</a> </li> <li> <a class="submenu" href="#Product2">Lorem ipsu</a> </li> </ul> </li> <li> <a class="menu" href="#"> <i class="fa fa-wrench" aria-hidden="true"></i>Lorem ipsu</a> <ul> <li> <a class="submenu" href="#Service1">Lorem ipsu</a> </li> <li> <a class="submenu" href="#Service2">Lorem ipsu</a> </li> </ul> </li> <li> <a class="menu" href="#"> <i class="fa fa-life-ring" aria-hidden="true"></i>Lorem ips</a> <ul> <li> <a class="submenu" href="#Service1">Lorem ips</a> </li> <li> <a class="submenu" href="#Service1">Lorem ipsum do</a> </li> </ul> </li> <li> <a class="menu" href="#"> <i class="fa fa-envelope" aria-hidden="true"></i>Lorem ips</a> </li> </ul> </nav> </body> </html>