/* 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: 180px; border: 2px solid #000099; border-bottom: 3px solid #000099; background: #fff !important; border-top: none; z-index: 300; } /* 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; z-index: 1; } /* Items in submenus - override float/border/margin from above, restoring default vertical style */ .menulist ul li { float: none; margin: 0; border-top: 1px solid #999999; margin-bottom: -1px; background: none; z-index: 2; } .menulist ul>li:last-child { margin-bottom: 1px; /* Mozilla fix */ } /* Links inside the menu */ .menulist a { display: block; float: left; width: 89px; margin-right: 2px; height: 30px; color: #000099; background: url("nav1-bg.gif") repeat-x 0px 0px; line-height: 1.1em; font-size: 12px; font-weight: bold; padding: 5px 0px 2px 0px; } .menulist a:link, .menulist a:visited, .menulist a:hover, .menulist a:active { color: #fff; } .menulist a:hover, .menulist a:active { color: #fff !important; background: url("nav1-bg.gif") repeat-x 0px -37px; } .menulist ul a { display: block; float: left; width: 175px; height: auto; color: #000099 !important; text-decoration: none; line-height: 1.4em; font-size: 12px; font-weight: bold; padding: 4px 0px 4px 5px; text-align: left; background-image: none !important; position: relative; z-index: 300; } /* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */ .menulist a:hover, .menulist a.highlighted, .menulist a:focus { color: #fff; text-decoration: none; background: url("nav1-bg.gif") repeat-x 0px -37px !important; } .menulist ul a.highlighted, .menulist ul a:focus { color: #fff; background: url("nav1-bg.gif") repeat-x 0px -37px !important; } .menulist ul a:hover { color: #fff; background: url("nav1-bg.gif") repeat-x 0px -37px !important; } .menulist a.highlighted:hover, .menulist a.highlighted:active { color: #fff; background: url("nav1-bg.gif") repeat-x 0px -37px !important; } /* 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 */