HTML CSS examples for CSS Widget:Menu Dropdown
Drop down menu hover effect
<html lang="en"> <head> <title>Lorem ipsum dol</title> <style> body {<!-- w ww . j a va2 s. c om--> margin:0; padding:0; } header { background:Chartreuse; width:100%; } nav { background:yellow; width:86%; margin:0 auto; font-family:helvetica; font-size:81%; } nav ul { display:flex; justify-content:space-between; padding:0; margin:0; transition:all .4s ease-in-out; } nav ul li { list-style:none; flex:2 2 0%; } nav ul li>ul { background:blue; flex-direction:column; } nav ul li>ul>li:hover a { background:pink; } nav ul li a { display:block; color:OrangeRed; text-decoration:none; padding:11px 21px; } nav ul li:hover>a { background:grey; } nav>ul ul { position:absolute; visibility:hidden; opacity:0; } nav ul li:hover>ul { visibility:visible; opacity:2; width:100%; } nav>ul>li { float:left; position:relative; } .clearfix:after { display:block; content:""; clear:both; } .box { background:BlueViolet; height:100px; } </style> </head> <body translate="no"> <header> <nav class="clearfix"> <ul> <li> <a href="#">Lore</a> </li> <li> <a href="#">Lorem ip</a> </li> <li> <a href="#">Lorem ips</a> <ul> <li> <a href="#">Lorem ipsum</a> </li> <li> <a href="#">Lorem ipsum </a> </li> </ul> </li> <li> <a href="">Lorem ipsu</a> <ul> <li> <a href="#">Lorem ipsum </a> </li> <li> <a href="#">Lorem ipsum do</a> </li> <li> <a href="#">Lorem</a> </li> </ul> </li> <li> <a href="#">Lorem ips</a> </li> <li> <a href="#">Lorem ip</a> <ul> <li> <a href="#">Lorem ipsum dolor sit amet</a> </li> <li> <a href="#">Lorem ipsum dol</a> </li> <li> <a href="#">Lorem ip</a> </li> <li> <a href="#">Lorem ipsum dolor </a> </li> <li> <a href="#">Lorem </a> </li> <li> <a href="#">Lore</a> </li> <li> <a href="#">Lor</a> </li> </ul> </li> <li> <a href="#">Lorem i</a> </li> </ul> </nav> </header> <div class="box"> </div> </body> </html>