/* 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 */ /* --------------------------------------- */ /* ----- MAIN MENU - LEFT 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. */ #main_menu { width: 147px; margin:10px; z-index:6000; } /* 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. / #main_menu a { font: bold 10pt/12pt arial, helvetica, sans-serif; display: block; margin: 0 0 0 2px; padding: 6px 4px 6px 13px; color: #fff; text-decoration: none; border-bottom:1px solid #b48c88; } #main_menu a:hover { color: #fff; background-color:#AE5B57; } #main_menu a.accent:link, #main_menu a.accent:visited { / highlights certain menu items / background-color: #e0c699; color:#253826; } #main_menu a.accent:hover, #main_menu a.accent:active{ / highlights certain menu items / background-color: #253826; color:#e0c699; } / 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. / #main_menu ul ul { position: absolute; top: -1px; left: 100%; width: 100%; / border:1px solid #587a41; border around popout menu / } #main_menu ul ul a { border:none; / no left border on popout links / color: #fff; margin:0; } / Fix the positioning of popout menus to be relative to their parent, instead of relative to / #main_menu li {position: relative; z-index:6000;/ 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#main_menu ul ul, div#main_menu ul li:hover ul ul /hide any 3rd level popouts / {display: none;} / but make them pop out when hovered / div#main_menu ul li:hover ul, div#main_menu ul ul li:hover ul / make 3rd level navs pop out when 2nd level is hovered / {display: block; border:1px solid #b38c88; background-color:#67322C; } / ------------------------------------------- / / ----- SECTION SUBNAV - HORIZONTAL ------ / / ------------------------------------------- / / this time the #secondnav div is our "container" only this time we want it to be 100% wide, so we could leave it as it is because it would default to this. However to properly contain the floated child lists if we also float the #secondnav div it will stretch to contain its floated children. We then need to set the required dropdown width but this time it goes directly onto the
elements themselves, and the need to be floated in order to appear side by side. We also still need to remove all the default padding, margins and bullets from the
s the same as before. / #secondnav { width: 100%; background: #66312B; float: left; margin:0px 0px 10px 0px; padding:0px; } #secondnav ul { list-style: none; margin: 0; padding: 0; float: left; } / Then we apply the required formatting to the anchors, again I'm using the same formatting as the vertical menu / #secondnav a { font: bold 11px arial, helvetica, sans-serif; display: block; margin: 0; padding: 2px 10px; color: #fff; background-color: #66312B; text-decoration: none; } #secondnav a:hover { color: #fff; background-color: #AE5B57; } / add the triangle graphic to horizontal mainlevel items / #secondnav ul li a.hassubmenu, #secondnav ul li a.hassubmenu:hover { background-image:url(../images/menu_triangle.gif); background-position:bottom right; background-repeat: no-repeat; } #secondnav ul ul a.hassubmenu, #secondnav ul ul a.hassubmenu:hover { background-image:none; } / we need to position the children, nested lists, of these choices absolutely , so we need to make the parent
elements into containing blocks for these absolutely positioned children, which is doing by placing position: relative; onto the parent
's and because we are not using offset co-ordinates to actually move these
elements we can apply it globally. Then we need to select all
elements that have at least one parent
in order to move it over into its pop out position. Setting a width makes all popouts the same width. Adding a z-index makes sure it floats above text further down on the page. / #secondnav li { position: relative; z-index:4000;} / make sure dropdowns are in front of everything else on the page. VERY IMPORTANT! If flash elements exist in content MAKE SURE TO PUT wmode=transparent in the flash object! / #secondnav ul ul { / first level of dropdowns should be below main item / position: absolute; top: 100%; left: 0; width:200px; } #secondnav ul ul ul { / subsequent levels of dropdowns should be to right of parent item / position: absolute; top: 0; left: 100%; width:200px; z-index:4000; / higher # means stacked on top / } / hide 3 levels of dropdowns / div#secondnav ul ul, div#secondnav ul li:hover ul ul, div#secondnav ul ul li:hover ul ul { display: none; } / make dropdowns appear on hover of parent menu item, 3 levels / div#secondnav ul li:hover ul, div#secondnav ul ul li:hover ul, div#secondnav ul ul ul li:hover ul {display: block; z-index:4000;} / ----------------------- / / ----- GENRES MENU ----- / / ----------------------- / / 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. / #genres_menu { width: 157px; margin: 8px; z-index:100; background-color: #413a38; border: 1px solid #56504e; color:white; } / Now that the list,
, elements are all contained. The first thing we do is remove the Bullets and Indents which browsers naturally apply to
elements by default. Both padding and margin require to be set to zero as different browsers create the indent using either of these properties. / #genres_menu ul { list-style: none; margin: 0; padding: 0; background-color: #413a38; } / Then we would like to make the
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. / #genres_menu a { font: bold 8pt/12pt arial, helvetica, sans-serif; display: block; margin: 0; padding: 2px 3px 2px 13px; color: #fff; background-color: #413a38; text-decoration: none; border-bottom:1px solid #56504e; } #genres_menu a:hover { display: block; color: #fff; background-color: #4d4543; text-decoration: none; border-bottom:1px solid #56504e; } #genres_menu a.accent:link, #genres_menu a.accent:visited { / highlights certain menu items / background-color: #e0c699; color:#253826; } #genres_menu a.accent:hover, #genres_menu a.accent:active{ / highlights certain menu items / background-color: #253826; color:#e0c699; } / 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. / #genres_menu ul ul { position: absolute; top: 0; left: 100%; width: 100%; / border:1px solid #587a41; border around popout menu / } #genres_menu ul ul a { border:none; / no left border on popout links / color: #fff; background-color: #413a38; margin:0; border-bottom:1px solid #56504e; } / Fix the positioning of popout menus to be relative to their parent, instead of relative to / #genres_menu 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#genres_menu ul ul, div#genres_menu ul li:hover ul ul /hide any 3rd level popouts / {display: none;} / but make them pop out when hovered / div#genres_menu ul li:hover ul, div#genres_menu ul ul li:hover ul / make 3rd level navs pop out when 2nd level is hovered */ {display: block; border:1px solid #56504e;}