/* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/main_navs/final_drop.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ /********** main nav **********/ .main_nav {/*width:745px height:32px; border-right:1px solid #000;*/ width:829px; height:39px; font-size:14px; position:relative; z-index:100; background-image:url(../im/menu_background.jpg); background-repeat:repeat-x; _margin-bottom:-3px;margin-top:26px;margin-left:-17px; } /* hack to correct IE5.5 faulty box model */ * html .main_nav {/*width:746px; w\idth:745px;*/ width:829px; w\idth:829px;} /* remove all the bullets, borders and padding from the default list styling */ .main_nav ul {padding:0; margin:0; list-style-type:none;} .main_nav ul ul {/*width:149px;*/ width:100px;} /* float the list to make it horizontal and a relative positon so that you can control the dropdown main_nav positon */ .main_nav li {float:left; /*width:149px;*/ width:100px; position:relative;} /* style the links for the top level */ .main_nav a, .main_nav a:visited {display:block; font-size:14px; text-decoration:none; color:#fff; width:90px; height:39px; /*width:138px; height:30px; border:1px solid #000; border-width:1px 0 1px 1px; background:#758279; background-image:url('../im/main_nav_divider.jpg'); background-repeat:no-repeat; background-position:right; padding-left:10px;*/ line-height:39px;} /* a hack so that IE5.5 faulty box model is corrected */ * html .main_nav a, * html .main_nav a:visited {/*width:149px; w\idth:138px;*/ width:100px; w\idth:90px;} /* style the second level background */ .main_nav ul ul a.drop, .main_nav ul ul a.drop:visited {background:#a8ca2c url(../im/arrow.gif) bottom right no-repeat;/*background:#a8ca2c;*/} /* style the second level hover */ .main_nav ul ul a.drop:hover{background:#709819 url(../im/arrow.gif) bottom right no-repeat; /*background:#709819;*/} .main_nav ul ul :hover > a.drop {background:#709819 url(../im/arrow.gif) bottom right no-repeat; /*background:#709819;*/} /* style the third level background */ .main_nav ul ul ul a, .main_nav ul ul ul a:visited {/*background:#e2dfa8;*/ background:#a8ca2c;} /* style the third level hover */ .main_nav ul ul ul a:hover {background:#709819;} /* hide the sub levels and give them a positon absolute so that they take up no room */ .main_nav ul ul {visibility:hidden; position:absolute; height:0; top:39px; left:0; width:100px; /*width:149px; top:31px; border-top:1px solid #000;*/} /* another hack for IE5.5 */ * html .main_nav ul ul {/*top:30px;t\op:31px;*/ top:41px; t\op:39px;} /* position the third level flyout main_nav */ .main_nav ul ul ul{/*left:149px; width:149px;*/ left:180px; width:171px; top:0px;} /* position the third level flyout main_nav for a left flyout */ .main_nav ul ul ul.left {/*left:-149px;*/ left:-180px;} /* style the table so that it takes no ppart in the layout - required for IE to work */ .main_nav table {position:absolute; top:0; left:0; border-collapse:collapse;} /* style the second level links */ .main_nav ul ul a, .main_nav ul ul a:visited {background:#a8ca2c; height:auto; line-height:12px; padding:8px 23px 8px; /*color:#000; width:128px; border-width:0 1px 1px 1px;*/ width:130px; font-size:11px;} /* yet another hack for IE5.5 */ * html .main_nav ul ul a, * html .main_nav ul ul a:visited {/*width:150px;w\idth:128px;*/ width:172px; w\idth:160px; } /* style the top level hover */ .main_nav a:hover, .main_nav ul ul a:hover{color:#fff; background:#709819;} .main_nav :hover > a, .main_nav ul ul :hover > a {color:#fff; background:#709819;} /* make the second level visible when hover on first level list OR link */ .main_nav ul li:hover ul, .main_nav ul a:hover ul{visibility:visible;} /* keep the third level hidden when you hover on first level list OR link */ .main_nav ul :hover ul ul{visibility:hidden;} /* make the third level visible when you hover over second level list OR link */ .main_nav ul :hover ul :hover ul{visibility:visible;} /********** search layer **********/ .header_nav {width:61px; height:24px; font-size:12px; position:relative; z-index:200; /*background-image:url(../im/btn_search.jpg); background-repeat:no-repeat;*/} /* hack to correct IE5.5 faulty box model */ * html .header_nav {width:62px; w\idth:61px;} /* remove all the bullets, borders and padding from the default list styling */ .header_nav ul {padding:0; margin:0; list-style-type:none;} .header_nav ul ul {width:61px;} /* float the list to make it horizontal and a relative positon so that you can control the dropdown header_nav positon */ .header_nav li {float:left; width:61px; position:relative;} /* style the links for the top level */ .header_nav a, .header_nav a:visited {display:block; font-size:12px; text-decoration:none; color:#464646; /*width:90px;*/ width:51px; height:46px; padding-left:10px;} /* a hack so that IE5.5 faulty box model is corrected */ * html .header_nav a, * html .header_nav a:visited {width:61px; w\idth:51px;} /* hide the sub levels and give them a positon absolute so that they take up no room */ .header_nav ul ul {visibility:hidden; position:absolute; height:0; top:34px; left:0; width:61px;} /* another hack for IE5.5 */ * html .header_nav ul ul {top:34px; t\op:35px;} /* style the table so that it takes no ppart in the layout - required for IE to work */ .header_nav table.nav_table {position:absolute; top:0; left:0; border-collapse:collapse;} /* style the second level links */ .header_nav ul ul li {width:583px; height:261px; background-image:url(../im/dropdown_background.jpg); background-repeat:no-repeat; padding:10px; margin-left:-519px; *margin-left:-524px;} /* style the top level hover */ .header_nav a:hover, .header_nav ul ul a:hover{background:transparent; /*background-image:url(../im/btn_search_over.jpg); background-repeat:no-repeat;*/} .header_nav :hover > a, .header_nav ul ul :hover > a {/*background-image:url(../im/btn_search_over.jpg); background-repeat:no-repeat;*/} /* make the second level visible when hover on first level list OR link */ .header_nav ul li:hover ul, .header_nav ul a:hover ul{visibility:visible;} /* keep the third level hidden when you hover on first level list OR link */ .header_nav ul :hover ul ul{visibility:hidden;} /* make the third level visible when you hover over second level list OR link */ .header_nav ul :hover ul :hover ul{visibility:visible;}