HTML CSS examples for CSS Widget:Menu Dropdown
Two level dropdown menu
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- w ww .j av a 2 s .com--> background-color:Chartreuse; } @font-face { font-family:Lato-Light; src:url('https://www.java2s.com/style/demo/Google-Chrome.png'); } @font-face { font-family:Lato-Light-Italic; src:url('https://www.java2s.com/style/demo/Google-Chrome.png'); } img.logo { width:501px; height:auto; display:block; margin-left:auto; margin-top:61px; margin-right:auto } div.br { margin-top:61px; } ul { padding:0px; font-family:Lato-Light; background:yellow; color:blue; width:536px; margin-left:auto; margin-right:auto; display:table; } ul li { padding:0px; margin:0px; display:inline-block; position:relative; line-height:22px; text-align:center; display:table-cell; } ul li a { display:block; padding:9px 26px; color:pink; text-decoration:none; } ul li a:hover { color:OrangeRed; background:grey; } ul li ul.dropdown1 { min-width:151px; max-width:351px; background:BlueViolet; display:none; position:absolute; z-index:1000; } ul li ul.dropdown2 { min-width:151px; max-width:201px; background:Chartreuse; display:none; position:absolute; z-index:1000; } ul li:hover ul.dropdown1 { display:block; } ul li ul.dropdown1 li { display:block; } ul li:hover ul.dropdown2 { display:block; } ul li ul.dropdown2 li { display:block; } div.content { width:536px; background:yellow; margin-left:auto; margin-right:auto; } p { color:blue; text-align:center; word-wrap:break-word; margin-right:51px; margin-left:51px; font-family:Lato-Light; } </style> </head> <body> <div class="br"></div> <ul class="menu"> <li class="list"> <a href="#">Lore</a> </li> <li> <a href="#">Lorem </a> <ul class="dropdown1"> <li> <a href="#">Lorem ipsum dolor sit amet, consectetur adi</a> </li> </ul> </li> <li> <a href="#">Lorem </a> <ul class="dropdown2"> <li> <a href="#">Lore</a> </li> </ul> </li> <li> <a href="#">Lore</a> </li> <li> <a href="#">Lorem ip</a> </li> </ul> <div class="content"> <br> <p>Lore</p> <br> </div> </body> </html>