.menulist ul {z-index:2;position:relative;} /* All <ul> tags in the menu including the first level */ .menulist, .menulist ul {margin: 0;padding: 0;width: 160px;list-style: none;} /* Submenus (<ul> tags) are hidden and absolutely positioned across from their parent. They don't *have* to touch their parent menus, but is' a good idea as CSS-only fallback mode requires menus to touch/overlap (when JS is disabled in the browser). */ .menulist ul {display: none;position: absolute;top: -1px;left: 160px;width: 200px;} .menulist ul ul {left: 198px;} /* All menu items (<li> tags) are relatively positioned to correctly offset their submenus. They have borders that are slightly overlaid on one another to avoid doubling up. */ .menulist li {position: relative;background: #243348;margin-bottom: -1px;} .menulist ul>li:last-child {margin-bottom: 1px; /* Mozilla fix */} /* Links inside the menu */ .menulist a {display: block;padding: 5px;color: #fff;text-decoration: none;border: 1px solid #dcdf9a;font-weight: bold;} /* List items: 'hover' is mouseover, 'highlighted' are parent items to visible menus. */ .menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {color: #000000;background-color: #dcdf9a;} .menulist a:visited {color: #fff;} /* New BOFW */ .menulist li.toplevel {margin-bottom: 0;} .menulist a.toplevel {height:50px;padding:10px 3px 10px 10px;display:block;background-image: url('bofw-section-menu-bg.jpg');background-repeat: no-repeat;background-position: top left;border:none;font-size: 1.4em;} .menulist a.toplevel:hover, .menulist a.toplevel:active, .menulist a.toplevel:focus {background-color: #243348;background-image: url('bofw-section-menu-top-level-bg-hover.jpg');} /* 'subind' submenu indicators, which are automatically prepended to 'A' tag contents. */ .menulist a .subind {float: right;font-size: 0.8em;} /* 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 */