/* HORIZONTAL FREESTYLE MENU LAYOUT */ /* All <ul> tags in the menu including the first level */ .menulist, .menulist  ul { margin: 0; padding: 0; list-style: none; font-size: 11px; color: #ffffff;	 } /* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */ .menulist ul { display: none; position: absolute; top: 22px; left: -1px; width: 170px; } /* Second and third etc. level submenus - position across from parent instead */ .menulist ul ul { top: -1px; margin-top: 0; left: 170px; } /* 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; border-right: 2px solid #DF1E17; margin-right: -1px; line-height: 18px; } /* Items in submenus - override float/border/margin from above, restoring default vertical style */ .menulist ul li { float: none; margin: 0; border: 1px solid #dc3127; margin-bottom: -1px; color: #000000; } .menulist ul>li:last-child { margin-bottom: 1px; /* Mozilla fix */ } /* Links inside the menu */ .menulist a { display: block; padding: 3px 6px 3px 13px; margin: 0; font-size: 80%; color: #ffffff;	 text-decoration: none; background-image: url('invisible_image1x1.gif'); background-position: left; background-repeat: no-repeat; } /* Links inside the menu */ .menulist ul a { background-image: none; background-color: #cccccc; color: #000000; } /* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */ .menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus { color: #ffffff; background-color: #DF1E17; } .menulist a.highlighted { color: #00ff00; background-color: #dc3127; } /* 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 */