HTML CSS examples for CSS Widget:Menu Dropdown
Triple tier drop down menu
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> ul {<!-- w ww .j av a 2 s . co m--> margin:0; padding:0; list-style:none; } li { position:relative; padding:4px 6px; cursor:pointer; } li>ul { position:absolute; width:201px; display:none; background:Chartreuse; } li:hover>ul,li:focus>ul { display:block; } ul>li { display:inline-block; margin:0 11px; } ul>li li { display:block; } ul>li li>ul { top:0; left:100%; } li:hover { background:yellow; outline:2px dotted red; } </style> </head> <body> <ul> <li tabindex="0"> <span class="title">Lorem</span> <ul> <li>Lorem</li> <li> <span class="title">Lorem</span> <ul> <li>Lorem</li> <li>Lorem</li> <li>Lorem</li> </ul> </li> <li>Lorem</li> </ul> </li> <li tabindex="0"> <span class="title">Lorem</span> <ul> <li>Lorem</li> <li> <span class="title">Lorem</span> <ul> <li>Lorem</li> <li>Lorem</li> <li>Lorem</li> </ul> </li> <li>Lorem</li> </ul> </li> </ul> </body> </html>