/* 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;} / ----------------------- / / ----- TOPNAV ------ / / ----------------------- / / this time the #topnav div is still 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 #topnav 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. / #topnav { width: 100%; background: #214426; float: left; margin:0px; padding:0px; } #topnav 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 / #topnav a { font: bold 11px arial, helvetica, sans-serif; display: block; margin: 0; padding: 2px 10px; color: #fff; background-color: #214426; text-decoration: none; } #topnav a:hover { color: #fff; background-color: #587b41; } / add the triangle graphic to horizontal mainlevel items / #topnav ul li a.hassubmenu, #topnav ul li a.hassubmenu:hover { background-image:url(../images/menu_triangle.gif); background-position:bottom right; background-repeat: no-repeat; } #topnav ul ul a.hassubmenu, #topnav 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. / #topnav li { position: relative; z-index:5000;} / 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! / #topnav ul ul { / first level of dropdowns should be below main item / position: absolute; top: 100%; left: 0; width:200px; } #topnav ul ul ul { / subsequent levels of dropdowns should be to right of parent item / position: absolute; top: 0; left: 100%; width:200px; z-index:5000; / higher # means stacked on top / } / hide 3 levels of dropdowns / div#topnav ul ul, div#topnav ul li:hover ul ul, div#topnav ul ul li:hover ul ul { display: none; } / make dropdowns appear on hover of parent menu item, 3 levels / div#topnav ul li:hover ul, div#topnav ul ul li:hover ul, div#topnav ul ul ul li:hover ul {display: block; z-index:5000; } / attempt to prevent padding on 2nd level LI when hovered / div#topnav ul ul li a:hover ul { margin:0; padding:0; height:1em; } / ------------------------ / / --- TOPNAV HOME PAGE --- / / ------------------------ / / comments are same as for topnav above, unless specified below / #topnav_home { width: 100%; background: #b5bcc4; float: left; margin:0px; padding:0px; border-bottom:1px solid white; } #topnav_home ul { list-style: none; margin: 0; padding: 0; float: left; } #topnav_home a { font: bold 11px arial, helvetica, sans-serif; display: block; margin: 0; padding: 2px 6px; color: #000; background-color: #b5bcc4; text-decoration: none; border-right:1px solid white; } #topnav_home a:hover { background-color: #cfcfd1; } #topnav_home ul ul a {border-right:none;} #home_hnav ul#home_item {/ hide the "Home" Nav item on the home page only / display:none; } #home_hnav ul li#virtual_showroom {/ hide the "Virtual Showroom" item from the About Us dropdown on the home page only / display:none; } / add the triangle graphic to horizontal mainlevel items / #topnav_home ul li a.hassubmenu, #topnav_home ul li a.hassubmenu:hover { background-image:url(../images/menu_triangle.gif); background-position:bottom right; background-repeat: no-repeat; } #topnav_home ul ul a.hassubmenu, #topnav_home ul ul a.hassubmenu:hover { background-image:none; } #topnav_home li { position: relative; z-index:5000;} / 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! / #topnav_home ul ul { / first level of dropdowns should be below main item / position: absolute; top: 100%; left: 0; width:200px; } #topnav_home ul ul ul { / subsequent levels of dropdowns should be to right of parent item / position: absolute; top: 0; left: 100%; width:200px; z-index:5000; / higher # means stacked on top / } / hide 3 levels of dropdowns / div#topnav_home ul ul, div#topnav_home ul li:hover ul ul, div#topnav_home ul ul li:hover ul ul { display: none; } / make dropdowns appear on hover of parent menu item, 3 levels / div#topnav_home ul li:hover ul, div#topnav_home ul ul li:hover ul, div#topnav_home ul ul ul li:hover ul {display: block; z-index:5000;} / ----------------- / / -- BOTTOMNAV ---- / / ----------------- / #bottomnav { background: #214426; float: right; margin:0px; padding:0px; right:0px; } #bottomnav ul { list-style: none; margin: 0; padding: 0; / allow each main item to be its own appropriate size width: 12em; / float: left; } / Then we apply the required formatting to the anchors, again I'm using the same formatting as the vertical menu / #bottomnav a { font: bold 11px arial, helvetica, sans-serif; display: block; margin: 0; padding: 2px 12px; color: #fff; background-color: #214426; text-decoration: none; } #bottomnav a:hover { color: #fff; background-color: #587b41; } / 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. / #bottomnav li { position: relative; z-index:5000;} / 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! / #bottomnav ul ul { / first level of dropdowns should be ABOVE main item / position: absolute; bottom: 100%; left: 0; width:122px; text-align:left; } #bottomnav ul ul ul { / subsequent levels of dropdowns should be to right of parent item / position: absolute; bottom: 0; left: 100%; width:122px; z-index:5000; / higher # means stacked on top / } / hide 3 levels of dropdowns / div#bottomnav ul ul, div#bottomnav ul li:hover ul ul, div#bottomnav ul ul li:hover ul ul { display: none; } / make dropdowns appear on hover of parent menu item, 3 levels / div#bottomnav ul li:hover ul, div#bottomnav ul ul li:hover ul, div#bottomnav ul ul ul li:hover ul {display: block; z-index:5000;} / ----------------------------- / / --- HARDWARE OPTIONS --- / / ----------------------------- / / 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. / #options { width: 100px; background: #c2cbac; margin:12px 12px; z-index:3000; } / 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. / #options ul { list-style: none; margin: 0; padding: 0; } / 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. / #options a { font: bold 11px/16px arial, helvetica, sans-serif; display: block; / border-top: 1px solid #839d71; / border-right: 2px solid #577a40; / border-bottom: 1px solid #577a40; border-left:1px solid #839d71; / margin: 0; padding: 2px 3px; color: #214426; background: #c2cbac; text-decoration: none; } #options a:hover { color: #fff; background: #587a41; } / 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. / #options ul ul { position: absolute; top: 0; left: 100%; width: 100%; border:1px solid #587a41; / border around popout menu / } #options ul ul a { border:none; / no right border on popout links / color: #214426; } / Fix the positioning of popout menus to be relative to their parent, instead of relative to / #options li {position: relative; z-index:3000;/ make sure dropdowns are in front of everything else on the page, except the dropdowns from the bottom nav (hence 3000 here, 5000 in the bottom nav). VERY IMPORTANT! If flash elements exist in content MAKE SURE TO PUT wmode=transparent in the flash object! / } / hide all the popouts / div#options ul ul, div#options ul li:hover ul ul /hide any 3rd level popouts / {display: none;} / but make them pop out when hovered / div#options ul li:hover ul, div#options ul ul li:hover ul / make 3rd level navs pop out when 2nd level is hovered */ {display: block;}