/* MODIFIED OFFICE-STYLE FREESTYLE MENU LAYOUT */ /* All <ul> tags in the menu including the first level */ .menulist, .menulist ul { margin: 0; padding: 1px; width: 170px; list-style: none; background: #eeab7e; border: 1px solid #fa6d04; } /* Submenus (<ul> tags) are hidden and absolutely positioned across from their parent */ .menulist ul { display: none; position: absolute; top: 0; left: 170px; } /* All menu items (<li> tags) are relatively positioned (to correctly offset submenus). */ .menulist li { position: relative; } /* Links inside the menu */ .menulist li a { display: block; padding: 0px 4px 0px 0px; color: #000; text-decoration: none; border: 1px solid transparent; font-weight: bold; margin: 0; } /* HACKS: MSIE6 doesn't support transparent borders, mimic with margins */ * html .menulist li a { border-width: 0; margin: 1px; } /* Lit items: hover/focus = the current item. 'highlighted' = parent items to visible menus. Here, active items are given a border, and a padding tweak to 'elevate' the text within. Feel free to use background-image:url(file.gif) instead of background-color:#nnn here... */ .menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus { color: #FFF; background-color: #889397; padding: 0px 4px 0px 0px; border: 1px solid #ADF; margin: 0; text-decoration: none; } .menulist a.highlighted { color: #FFF; background-color: #889397; border: 1px solid #CDE; margin: 0; } .menulist a:visited { text-decoration: none; } /* 'subind' submenu indicators, which are automatically prepended to 'A' tag contents. */ .menulist a .subind { float: right; } /* 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 li { float: left; width: 100%; } * html .menulist li { float: left; height: 1%; } * html .menulist a { height: 1%; } /* End Hacks */