HTML CSS examples for CSS Widget:Menu
Create css navigation menus and controls
<!--<!-- ww w . j a v a2s . c o m--> Created using JS Bin http://jsbin.com Released under the MIT license: http://jsbin.mit-license.org --> <html> <head> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; } .top-nav { margin:0; padding:0; background-color:Chartreuse; color:yellow; font-family:Sans-Serif; font-size:0; } .top-nav>li { display:inline-block; vertical-align:top; position:relative; padding:0; margin:0; font-size:16px; } .top-nav>li>a { color:blue; display:inline-block; margin:0; padding:6px; text-decoration:none; border-right:2px solid pink; } .top-nav>li:hover .sub-nav { display:block; } .top-nav>li>a:hover { background-color:OrangeRed; } .sub-nav { margin:0; padding:0; position:absolute; left:0px; border-top:2px solid grey; background-color:BlueViolet; width:141px; display:none; } .sub-nav>li { display:block; position:relative; } .sub-nav>li:hover .sub-sub-nav { display:block; } .sub-nav>li>a { color:Chartreuse; display:block; text-decoration:none; border-bottom:2px solid yellow; padding:4px 11px; } .sub-nav>li>a:hover { background-color:blue; } .sub-sub-nav { position:absolute; top:0; left:100%; margin:0; border-left:2px solid pink; padding:0; background-color:OrangeRed; width:121px; display:none; } .sub-sub-nav>li { display:block; } .sub-sub-nav>li>a { color:grey; text-decoration:none; display:block; border-bottom:2px solid BlueViolet; padding:3px 6px; } .sub-sub-nav>li>a:hover { background-color:Chartreuse; } </style> </head> <body> <ul class="top-nav"> <li> <a href="#">Lore</a> </li> <li> <a href="#">Lorem ip</a> <ul class="sub-nav"> <li> <a href="#">Lorem ipsu<span style="float:right">L</span> </a> <ul class="sub-sub-nav"> <li> <a href="#">Lorem ipsum dol</a> </li> <li> <a href="#">Lorem ipsum do</a> </li> <li> <a href="#">Lorem ipsum dolo</a> </li> </ul> </li> <li> <a href="#">Lorem ipsum</a> </li> <li> <a href="#">Lorem ipsu</a> </li> </ul> </li> <li> <a href="#">Lorem</a> <ul class="sub-nav"> <li> <a href="#">Lorem </a> </li> <li> <a href="#">Lorem ips</a> </li> <li> <a href="#">Lorem </a> </li> </ul> </li> </ul> </body> </html>