HTML CSS examples for CSS Widget:Menu Dropdown
Count indicator adds extra spaces in a dropdown menu
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> html {<!--from w ww . jav a 2s.co m--> height:100%; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote { padding:0; margin:0; } body { cursor:default; font:12px/14px verdana,tahoma,arial; color:Chartreuse; background-color:yellow; } div#xx2menus { margin:0px auto; width:969px; height:37px; background:blue; background:-webkit-linear-gradient(pink, OrangeRed); background:-o-linear-gradient(grey, BlueViolet); background:-moz-linear-gradient(Chartreuse, yellow); background:linear-gradient(blue, pink); border:2px solid OrangeRed; border-radius:4px; z-index:1000 } #xx2menu,#xx2menu ul { list-style:none; } #xx2menu { float:left; font-family:Arial; } #xx2menu>li { float:left; } #xx2menu li a { display:block; padding:12px 11px 13px 11px; text-decoration:none; } #xx2menu ul { position:absolute; display:none; z-index:1000; } #xx2menu ul li a { width:81px; } #xx2menu li:hover ul { display:block; } #xx2menu>li>a { color:grey; font-weight:701; position:relative; } #xx2menu>li:hover>a { background:BlueViolet; color:Chartreuse; } #xx2menu ul { border-bottom-right-radius:4px; border-bottom-left-radius:4px } #xx2menu ul li a { color:yellow; } #xx2menu ul li:hover a { background:blue; } span.badge { display:inline-block; padding:2px 6px 2px 6px; text-align:center; color:pink; font-size:11px; line-height:14px; -moz-border-radius:4px; border-radius:4px; -o-border-radius:4px; -khtml-border-radius:4px; } a span.badge { position:absolute; top:0; right:6px; margin:-8px -8px 0 0; } span.badge.on { background-color:OrangeRed; color:grey; } .lsub:nth-child(odd) { background-color:BlueViolet; } .lsub:nth-child(even) { background-color:Chartreuse; } </style> </head> <body> <p> </p> <p> </p> <div id="xx2menus"> <ul id="xx2menu"> <li> <a href="/">Lor</a> </li> <li> <a href="/">Lorem<span class="badge on">L</span> </a> </li> <li> <a href="/">Lorem</a> </li> <li> <a href="/">Lorem <span class="badge on">Lo</span> </a> <ul> <li class="lsub"> <a href="/">Lorem ip</a> </li> <li class="lsub"> <a href="/">Lorem ip</a> </li> </ul> </li> </ul> </div> </body> </html>