/* This is the stylesheet needed to style the horizontal and vertical menus correctly */ /* based on this tutorial http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp */ /* ----------------------- */ /* ----- VERTICAL -------- */ /* ----------------------- */ /* Defining the width of the menu to the "container" div ~

, means can forget about IE's Box Model problems as all block elements inside this will naturally fill the container's width by default, even if borders are used on internal elements. */ #vertical { width: 176px; background: #cacaa5; margin:0px 8px; z-index:100; } /* Now that the list,

headings and the anchors appear in the same size text and with borders but with slightly differing colors to differentiate between the two. This is also where we'll add any color, background changes to the anchor text on hover. / #vertical a { font: bold 11px/16px arial, helvetica, sans-serif; display: block; border-left: 2px solid #577a40; margin: 0; padding: 2px 3px; color: #214426; background: #cacaa5; text-decoration: none; } #vertical a:hover { color: #fff; background: #587a41; } #vertical a.accent:link, #vertical a.accent:visited { / highlights certain menu items / background-color: #cacaa5; color:#990000; } #vertical a.accent:hover, #vertical a.accent:active{ / highlights certain menu items / background-color: #efdb35; color:#990000; } / Now we want to move the 2nd level lists out to where they should be, to their "pop out" position. The way we do this is to use Absolute Positioning which takes them out of the flow of the page and allows us to position them where we want. / #vertical ul ul { position: absolute; top: 0; left: 100%; width: 100%; border:1px solid #587a41; / border around popout menu / } #vertical ul ul a { border:none; / no left border on popout links / color: #214426; } / Fix the positioning of popout menus to be relative to their parent, instead of relative to / #vertical li {position: relative; z-index:4000;/ make sure dropdowns are in front of everything else on the page, except the dropdowns from the horizontal nav (hence 4000 here, 5000 in the horizontal nav). VERY IMPORTANT! If flash elements exist in content MAKE SURE TO PUT wmode=transparent in the flash object! / } / hide all the popouts / div#vertical ul ul, div#vertical ul li:hover ul ul /hide any 3rd level popouts / {display: none;} / but make them pop out when hovered / div#vertical ul li:hover ul, div#vertical ul ul li:hover ul / make 3rd level navs pop out when 2nd level is hovered */ {display: block;}