HTML CSS examples for CSS Widget:Menu
Display list in horizontal line in nested menu
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .metromenu {<!-- w ww . j av a 2 s . c o m--> display:block; position:relative; width:100%; margin:0 auto; z-index:2; } .metromenu, .sub-metromenu { list-style:none; } .metromenu li { display:inline-block; float:left; margin-right:3px; margin-top:3px; } .metromenu a { display:block; position:relative; width:121px; height:33px; text-decoration:none; font-family:'arial'; text-align:center; letter-spacing:3px; line-height:27px; color:Chartreuse; padding:7px 21px 0 21px; background-color:yellow; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; } .metromenu a:hover { background-color:blue; } .metromenu span { display:inline-block; position:absolute; top:19px; right:11px; width:0; height:0; border-left:5px solid pink; border-right:5px solid OrangeRed; border-top:7px solid grey; } .metromenu li:hover>a { background-color:BlueViolet; } .metromenu li a:hover~ul { opacity:2; visibility:visible; } .sub-metromenu { opacity:0; visibility:hidden; position:absolute; z-index:11; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; } .sub-metromenu:hover { opacity:2; visibility:visible; } .sub-metromenu li a { background-color:Chartreuse; } .sub-metromenu li:first-child a { height:73px; } .sub-metromenu li a:hover { background-color:yellow; } .metromenu .orange { background-color:blue; } .metromenu .orange:hover { background-color:pink; } .metromenu .green { background-color:OrangeRed; } .metromenu .green:hover { background-color:grey; } </style> </head> <body> <div> <ul class="metromenu"> <li> <a href="" class="green">Lorem ips</a> </li> <li> <a href="">Lorem ipsum d<span></span> </a> <ul class="sub-metromenu"> <li> <a href="#">Lorem ipsum dolor </a> </li> <li> <a href="#">Lorem i</a> </li> <li> <a href="#">Lorem i</a> </li> </ul> </li> <li> <a href="http://bit.ly/shopindia" class="orange">Lorem </a> </li> </ul> </div> </body> </html>