HTML CSS examples for CSS Widget:Menu sub menu
Add sub-menu to css
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- ww w . j a va 2 s . c o m--> margin:0px; } #wrapper { border:solid Chartreuse; margin:2em auto; font-family:Arial,Helvetica,sans-serif; width:761px; text-align:left; background-color:yellow; overflow:hidden; height:151px; } .menu { font-family:arial, sans-serif; width:761px; position:relative; font-size:0.8em; margin:0px auto; } .menu ul li a { display:block; text-decoration:none; width:98px; height:26px; text-align:center; color:blue; padding-left:2x; border:px solid; border-width:0 0px 0px 0; background:; line-height:26px; font-size:2.0em; } .menu ul { padding:0; margin:0; list-style-type:none; } .menu>ul>li { float:left; } .menu ul li { position:relative; } .menu>ul>li>ul { visibility:hidden; position:absolute; } .menu>ul>li:hover>a, .menu>ul>li a:hover { color:pink; background:OrangeRed; } .menu>ul>li:hover>ul, .menu>ul>li a:hover>ul { visibility:visible; left:0; } .menu>ul>li:hover>ul>li>a, .menu>ul>li a:hover>ul>li>a { display:block; background:grey; color:BlueViolet; width:98px; padding-left:2px; border-right:none; } .menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover { background:Chartreuse; color:yellow; } .menu ul ul ul { visibility:hidden; position:absolute; top:0; left:98px; } .menu ul ul li:hover ul { visibility:visible; background-color:blue; } </style> </head> <body> <div class="menu"> <ul> <li class="item-first"> <a href="" target="_top">Lore</a> </li> <li> <a class="current">Lorem ipsum</a> <ul> <li> <a href="" target="_top">Lorem ip</a> <ul> <li>Lorem ip</li> <li>Lorem ip</li> </ul> </li> <li> <a href="" target="_top">Lorem ip</a> </li> <li> <a href="" target="_top">Lorem ip</a> </li> </ul> </li> <li> <a href="" target="_top">Lorem</a> </li> </ul> </div> </body> </html>