HTML CSS examples for CSS Widget:Menu Dropdown
Drop down menu with horizontal submenu
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #existingContainer {<!-- w w w .ja v a2s . co m--> width:501px; } .menu { background-color:Chartreuse; } .menu a { color:yellow; height:11px; padding:0 6px; text-decoration:none; } .menu li { display:inline-block; position:relative; border-right:2px solid blue; color:pink; } .menu li:last-of-type { border-right:none; } .menu li>ul { position:absolute; left:100%; top:0; width:auto; display:none; white-space:nowrap; } .menu>li>ul { top:auto; left:0; width:100%; } .menu li>a:after { margin-left:6px; content:'\26BA'; } .menu>li>a:after { margin-left:6px; content:'\26BC'; } .menu li>a:only-child:after { margin-left:0; content:''; } .menu li>ul>li { border-right:none; border-bottom:2px solid OrangeRed; display:block; } .menu li:hover { background-color:grey; } .menu li:hover>ul { display:block; } </style> </head> <body> <div id="existingContainer"> <ul class="menu"> <li> <a href="#">Lorem ips</a> <ul> <li> <a href="#">Lorem ipsu</a> </li> <li> <a href="#">Lorem ipsu</a> <ul> <li> <a href="#">Lorem ipsum </a> </li> </ul> </li> </ul> </li> <li> <a href="#">Lorem ipsum </a> </li> <li> <a href="#">Lorem ipsum d</a> <ul> <li> <a href="#">Lorem ipsu</a> </li> <li> <a href="#">Lorem ipsu</a> <ul> <li> <a href="#">Lorem ipsum do</a> </li> <li> <a href="#">Lorem ipsum do</a> </li> <li> <a href="#">Lorem ipsum do</a> <ul> <li> <a href="#">Lorem ipsum dolo</a> </li> </ul> </li> </ul> </li> </ul> </li> <li> <a href="#">Lorem ip</a> </li> </ul> </div> </body> </html>