/* All <ul> tags in the menu including the first level */ .menulist, .menulist ul { margin: 0; padding: 0; list-style: none; z-index: 2; } /* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */ .menulist ul { display: none; position: absolute; top: 37px; left: -1px; width: 170px; z-index: 2; } /* All menu items (<li> tags). 'float: left' lines them up horizontally, and they are positioned relatively to correctly offset submenus. Also, they have overlapping borders. */ .menulist li { float: left; display: block; position: relative; margin-right: -1px; border-left: 1px solid #fff; z-index: 2; } /* Items in submenus - override float/border/margin from above, restoring default vertical style */ .menulist ul li { float: none; margin: 0; border: 1px solid #999999; border-bottom: none; margin-bottom: -1px; z-index: 2; } .menulist ul>li:last-child { margin-bottom: 1px; /* Mozilla fix */ } /* Links inside the menu */ .menulist a { display: block; float: left; width: 90px; height: 30px; color: #fff; text-decoration: none; line-height: 1.1em; font-size: 12px; font-weight: bold; padding: 5px 0px 2px 0px; background: url('tabs.gif') 0 0; } .menulist a:link, .menulist a:visited, .menulist a:hover, .menulist a:active { color: #fff; text-decoration: none; } .menulist ul a { display: block; float: left; width: 165px; height: auto; color: #fff; text-decoration: none; line-height: 1.6em; font-size: 12px; font-weight: bold; padding: 0px 0px 0px 5px; background: #000099; text-align: left !important; } /* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */ .menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus { background-position: -180px 0; color: #fff; } .menulist ul a:hover, .menulist ul a.highlighted:hover, .menulist ul a:focus { background: #0f59c3; color: #fff; } .menulist ul a.highlighted { color: #FFF; } /* If you want per-item background images in your menu items, here's how to do it. 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#"> 2) Copy and paste these next lines for each link you want to have an image: .menulist a#xyz { background-image: url(out.gif); } .menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus { background-image: url(over.gif); } */ /* Only style submenu indicators within submenus. */ .menulist a .subind { display: none; } .menulist ul a .subind { display: block; float: right; } /* 'Escaped Comment' hack for horizontal menubar width in IE5/Mac */ .menulist a { float: left; } .menulist ul a { float: none; } /* \*/ .menulist a { float: none; } /* */ /* HACKS: IE/Win: A small height on <li> and <a> tags and floating prevents gaps in menu. * html affects <=IE6 and *:first-child+html affects IE7. You may want to move these to browser-specific style sheets. */ *:first-child+html .menulist ul li { float: left; width: 100%; } * html .menulist ul li { float: left; height: 1%; } * html .menulist ul a { height: 1%; } /* End Hacks */