HTML CSS examples for CSS Widget:Menu Dropdown
CSS Dropdown Menu, overlap parent
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .menu {<!-- w ww. j a v a 2s .c o m--> clear:both; display:block; max-width:100%; margin:0 auto; padding:0; border:2px solid Chartreuse; border-bottom:8px solid yellow; text-align:center; } .menu ul { display:block; max-width:100%; height:4.3em; margin:0 auto; padding:0; list-style-type:none; text-align:center; } .menu ul li { display:inline-block; margin:0; padding:0; height:4.3em; line-height:4.3em; position:relative; } .menu ul li>div { display:none; visibility:hidden; position:absolute; right:51%; padding:0; background:blue; z-index:1000; white-space:nowrap; transition:display 0.26s ease; } .menu ul li:hover>div { display:table; visibility:visible; max-width:100%; } .menu ul li a { display:block; margin:0; padding:0 3em; font-size:91%; font-weight:701; text-transform:uppercase; transition:background-color 0.26s ease; } .menu ul li a:hover { background-color:pink; color:OrangeRed; } .menu ul li.switcher { display:none; } </style> </head> <body> <div class="menu"> <ul class="level0"> <li class="level0"> <a href=" http://domain.com/"> <span>Lore</span> </a> <div class="sub"> <div class="sub-column"> <a href="http://domain.com/customer-service"> <span>Lorem ipsum dolo</span> </a> </div> <div class="sub-column"> <a href="http://domain.com/privacy-policy"> <span>Lorem ipsum do</span> </a> </div> </div> </li> <li class="level0"> <a href=" http://domain.com/about"> <span>Lorem ip</span> </a> <div class="sub"> <div class="sub-column"> <div> <p>Lorem ipsum dolor sit amet, consectetur adi</p> </div> </div> </div> </li> </ul> </div> </body> </html>