/* All <ul> tags in the menu including the first level */ .menulist, .menulist ul { margin: 0; padding: 0; list-style: none; } /* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */ .menulist ul { display: none; position: absolute; top: 29px; left: 0px; width: 200px; } /* Second and third etc. level submenus - position across from parent instead */ .menulist ul ul { top: 0px; margin-top: 0; left: 200px; } /* 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; } /* Items in submenus - override float/border/margin from above, restoring default vertical style */ .menulist ul li { float: none; margin: 0; margin-bottom: 0px; } .menulist ul>li:last-child { margin-bottom: 1px; /* Mozilla fix */ } /* Links inside the menu */ .menulist a { float: left; color: #fff; text-decoration: none; line-height: 2.2em; font-size: 12px; width: 198px; text-align: center; background: url("site-nav-bg.gif") repeat-x 0 0; border: 1px solid #ccc; border-top: none; display: block; height: 28px; font-weight: bold; } /* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */ .menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus { background: #79a948 url("palette-bg.jpg") repeat-x 0px -100px; color: #fff; } .menulist a.highlighted { background: #79a948 url("palette-bg.jpg") repeat-x 0px -100px; 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 */