/* TERTIARY NAVIGATION ******************************************************************************************************************************************************************************* START TERTIARY NAVIGATION */ #tertnav { position:absolute; top:-5px; left:0; width:120px; height:22px; } #tertnav li { float:left; position:relative; height:22px; list-style:none; } #tertnav li a { margin-left:0; cursor:pointer; } #tertnav li a, #tertnav li div { position:relative; display:block; height:22px; text-decoration:none; color:#fff; font-size:11px; } #tertnav li strong { position:absolute; top:0px; left:0px; display:block; height:22px; } #tertnav li, #tertnav li a, #tertnav li strong, #tertnav li div { background-image:url(/assets/images/tertnav.gif); } #tertnav li.language, #tertnav li.language a, #tertnav li.language a strong { background-position:0px 0px; width:120px; } #tertnav li.language:hover a, #tertnav li.language:hover a strong, #tertnav li.language a:hover, #tertnav li.language a:hover strong { background-position:0px -22px; width:120px; } /* FIRST LEVEL DROP DOWNS */ #tertnav li ul { display:none; } #tertnav li:hover ul, #tertnav li a:hover ul { display:block; position:absolute; top:22px; left:0; width:120px; border-bottom:1px solid #89bdd2; background:none; } #tertnav li:hover li, #tertnav li a:hover li { height:auto; width:120px !important; } #tertnav li:hover li.last, #tertnav li a:hover li.last { background:#f6f6f6; } #tertnav li:hover li a, #tertnav li a:hover li a { padding:3px 0 4px 9px; display:block; width:109px !important; height:auto; color:#0077ab; background:#fff !important; border-left:1px solid #89bdd2; border-right:1px solid #89bdd2; } * html #tertnav li:hover li a, * html #tertnav li a:hover li a { width:120px !important; w\idth:113px; } #tertnav li:hover li a:hover, #tertnav li a:hover li a:hover { color:#33b9f4; background:#f4fafd !important; } /* END TERTIARY NAVIGATION **************************************************************************************************************************************************************************** END TERTIARY NAVIGATION */ /* MAIN NAVIGATION ************************************************************************************************************************************************************************************************ START MAIN NAVIGATION */ .home #nav { position:absolute; top:61px; left:0; width:619px; height:28px; } #nav { position:relative; width:619px; height:28px; margin-left:10px; } #nav * { z-index:300; } #nav li { float:left; position:relative; list-style:none; } #nav li.top { height:28px; } #nav li a { cursor:pointer; } #nav li a, #nav li div.on { position:relative; display:block; text-decoration:none; color:#fff; font-size:14px; } #nav li.top a.top { height:28px; } #nav li strong { position:absolute; top:0px; left:0px; display:block; height:28px; } #nav li, #nav li a, #nav li strong, #nav li div.on { background-image:url(/assets/images/nav.gif); background-repeat: no-repeat; } /* NORMAL STATE */ #nav li.doctor-finder, #nav li.doctor-finder a, #nav li.doctor-finder a strong { background-position:-1px 0px; width:113px; } #nav li.patient-guide, #nav li.patient-guide a, #nav li.patient-guide a strong { background-position:-114px 0px; width:113px; } #nav li.services, #nav li.services a, #nav li.services a strong { background-position:-227px 0px; width:75px; } #nav li.health-education, #nav li.health-education a, #nav li.health-education a strong { background-position:-302px 0px; width:137px; } #nav li.locations, #nav li.locations a, #nav li.locations a strong { background-position:-439px 0px; width:87px; } #nav li.about-us, #nav li.about-us a, #nav li.about-us a strong { background-position:-526px 0px; width:87px; } /* HOVER STATE */ #nav li.doctor-finder:hover a, #nav li.doctor-finder:hover a strong, #nav li.doctor-finder a:hover, #nav li.doctor-finder a:hover strong, #nav li.doctor-finder.tabon, #nav li.doctor-finder.tabon a, #nav li.doctor-finder.tabon a strong { background-position:-1px -28px; } #nav li.patient-guide:hover a, #nav li.patient-guide:hover a strong, #nav li.patient-guide a:hover, #nav li.patient-guide a:hover strong, #nav li.patient-guide.tabon, #nav li.patient-guide.tabon a, #nav li.patient-guide.tabon a strong { background-position:-114px -28px; } #nav li.services:hover a, #nav li.services:hover a strong, #nav li.services a:hover, #nav li.services a:hover strong, #nav li.services.tabon, #nav li.services.tabon a, #nav li.services.tabon a strong{ background-position:-227px -28px; width:75px; } #nav li.health-education:hover a, #nav li.health-education:hover a strong, #nav li.health-education a:hover, #nav li.health-education a:hover strong, #nav li.health-education.tabon, #nav li.health-education.tabon a, #nav li.health-education.tabon a strong { background-position:-302px -28px; } #nav li.locations:hover a, #nav li.locations:hover a strong, #nav li.locations a:hover, #nav li.locations a:hover strong, #nav li.locations.tabon, #nav li.locations.tabon a, #nav li.locations.tabon a strong { background-position:-439px -28px; } #nav li.about-us:hover a, #nav li.about-us:hover a strong, #nav li.about-us a:hover, #nav li.about-us a:hover strong, #nav li.about-us.tabon, #nav li.about-us.tabon a, #nav li.about-us.tabon a strong { background-position:-526px -28px; } /* ON STATE */ #nav li.doctor-finderon, #nav li.doctor-finderon strong, #nav li.doctor-finderon div.on { background-position:-1px -56px; width:113px; } #nav li.patient-guideon, #nav li.patient-guideon strong, #nav li.patient-guideon div.on { background-position:-114px -56px; width:113px; } #nav li.serviceson, #nav li.serviceson strong, #nav li.serviceson div.on { background-position:-227px -56px; width:75px; } #nav li.health-educationon, #nav li.health-educationon strong, #nav li.health-educationon div.on { background-position:-302px -56px; width:137px; } #nav li.locationson, #nav li.locationson strong, #nav li.locationson div.on { background-position:-439px -56px; width:87px; } #nav li.about-uson, #nav li.about-uson strong, #nav li.about-uson div.on { background-position:-526px -56px; width:87px; } /* ON STATE - HOVER */ #nav li.doctor-finderon:hover a, #nav li.doctor-finderon:hover a strong, #nav li.doctor-finderon a:hover, #nav li.doctor-finderon a:hover strong { background-position:-1px -28px; width:113px; } #nav li.patient-guideon:hover a, #nav li.patient-guideon:hover a strong, #nav li.patient-guideon a:hover, #nav li.patient-guideon a:hover strong { background-position:-114px -28px; width:113px; } #nav li.serviceson:hover a, #nav li.serviceson:hover a strong, #nav li.serviceson a:hover, #nav li.serviceson a:hover strong { background-position:-227px -28px; width:75px; } #nav li.health-educationon:hover a, #nav li.health-educationon:hover a strong, #nav li.health-educationon a:hover, #nav li.health-educationon a:hover strong { background-position:-302px -28px; width:137px; } #nav li.locationson:hover a, #nav li.locationson:hover a strong, #nav li.locationson a:hover, #nav li.locationson a:hover strong { background-position:-439px -28px; width:87px; } #nav li.about-uson:hover a, #nav li.about-uson:hover a strong, #nav li.about-uson a:hover, #nav li.about-uson a:hover strong { background-position:-526px -28px; width:87px; } /* FIRST LEVEL DROP DOWNS */ #doctorFinder, #patientGuide, #services, #healthEducation, #locations, #aboutUs {display: none;} #nav li .mainnav { position:absolute; top:28px; left:0; padding-top:3px; } /* .mainnav holds the drop down - top image */ #nav li .mainnav .mainnav { position:relative; top:0; padding-bottom:6px; } /* .mainnav .mainnav holds the drop down - bottom image */ #nav li .mainnav .mainnav .mainnav { position:relative; } /* .mainnav .mainnav .mainnav holds the drop down - stretch image */ #nav li ul, #nav li a ul { display:block; margin-left:8px; float:left; } #nav li li, #nav li a li { margin:2px 0; background:none; } #nav li li a, #nav li a li a { padding:0 0 0 1px; display:block; color:#207aa2; font-size:11px; background:#fff; } #nav li li a, #nav li a li a { color:#33b9f4; background:#fff; } #nav li li { padding-left:11px; background:url(/assets/images/bg_nav_dot.gif) 3px 7px no-repeat; } #nav li li ul { margin:0 0 0 -7px; padding:0; } #nav li li li { padding-left:13px; color:#3e9dc7; background:url(/assets/images/bg_nav_subdot.gif) 3px 7px no-repeat; } #nav li li li a { color:#3e9dc7; } #nav li h3 { font-size:12px; color:#7e7e7e; margin:8px 0 3px 9px; clear:both; } #nav li form { margin-left:9px; } #nav li form h3 { margin:0; clear:none; } #nav li ul.inline li { float:left; margin-right:5px; } #nav li .navbox { position:relative; margin:0 0 4px 10px; } #nav li .navbox .navbox { margin:0; padding:10px; } #nav li .navbox a { background:none; } #nav li .navbox h2 { line-height:17px; font-size:12px; color:#ff6400; } #nav li .navbox h3 { position:absolute; top:3px; right:30px; color:#207aa2; font-size:11px; } #nav li .navbox h3 a { color:#207aa2; font-size:11px; } #nav li .navbox form { margin:2px 0 0 0; } #nav li .navbox select { float:left; margin-right:6px; } #nav li .navbox button.btn_arrow_submit { width:21px; height:21px; margin-top:2px; padding:0; float:left; } #nav li.doctor-finder div, #nav li.doctor-finderon div { width:394px; } #nav li.doctor-finder .navbox, #nav li.doctor-finderon .navbox { width:373px; background:#daf4ff url(/assets/images/bg_navbox_doctor_top.gif) 0 0 no-repeat; } #nav li.doctor-finder .navbox .navbox, #nav li.doctor-finderon .navbox .navbox { background: url(/assets/images/bg_navbox_doctor_bottom.gif) 0 100% no-repeat; } #nav li.doctor-finder select, #nav li.doctor-finderon select { width:158px; } /* sets the width of the dropdown ul and li and li a to be consistent cross-browser. Also, the 'on' and 'off' states are set so that the dropdown works while the main nav item is in its 'on' state. This is messy due to cross-browser cascade issues, but it works */ #nav li.doctor-finder ul, #nav li.doctor-finder a ul, #nav li.doctor-finder ul li a, #nav li.doctor-finder a ul li a, #nav li.doctor-finderon ul, #nav li.doctor-finderon a ul, #nav li.doctor-finderon ul li a, #nav li.doctor-finderon a ul li a { width:165px; } /* sets the top, bottom and stretch image for the dropdowns. Again, styles for both 'on' and 'off' states here so that the dropdown will work if you are on a main nav index page #nav li.doctor-finder .mainnav, #nav li.doctor-finder a .mainnav, #nav li.doctor-finderon .mainnav, #nav li.doctor-finderon a .mainnav { background:url(/assets/images/bg_nav_doctor_top.gif) 0 0 no-repeat; } #nav li.doctor-finder .mainnav .mainnav, #nav li.doctor-finder a .mainnav .mainnav, #nav li.doctor-finderon .mainnav .mainnav, #nav li.doctor-finderon a .mainnav .mainnav { background:url(/assets/images/bg_nav_doctor_bottom.gif) 0 100% no-repeat; } #nav li.doctor-finder .mainnav .mainnav .mainnav, #nav li.doctor-finder a .mainnav .mainnav .mainnav, #nav li.doctor-finderon .mainnav .mainnav .mainnav, #nav li.doctor-finderon a .mainnav .mainnav .mainnav { background:url(/assets/images/bg_nav_doctor.gif) 0 0 repeat-y; } */ #nav li.doctor-finder .mainnav, #nav li.doctor-finder a .mainnav, #nav li.doctor-finderon .mainnav, #nav li.doctor-finderon a .mainnav { background:url(/assets/images/bg_nav_sprite.gif) 0 0 no-repeat; } #nav li.doctor-finder .mainnav .mainnav, #nav li.doctor-finder a .mainnav .mainnav, #nav li.doctor-finderon .mainnav .mainnav, #nav li.doctor-finderon a .mainnav .mainnav { background:url(/assets/images/bg_nav_sprite.gif) 0 100% no-repeat; } #nav li.doctor-finder .mainnav .mainnav .mainnav, #nav li.doctor-finder a .mainnav .mainnav .mainnav, #nav li.doctor-finderon .mainnav .mainnav .mainnav, #nav li.doctor-finderon a .mainnav .mainnav .mainnav { background:url(/assets/images/bg_sprite_repeat.gif) 0 0 repeat-y; } /* PATIENT GUIDE */ /* sets all three .mainnav to the set width of its background image (set below) */ #nav li.patient-guide div, #nav li.patient-guideon div { width:316px; } #nav li.patient-guide .navbox, #nav li.patient-guideon .navbox { width:295px; background:#daf4ff url(/assets/images/bg_navbox_patient_top.gif) 0 0 no-repeat; } #nav li.patient-guide .navbox .navbox, #nav li.patient-guideon .navbox .navbox { background: url(/assets/images/bg_navbox_patient_bottom.gif) 0 100% no-repeat; } #nav li.patient-guide select, #nav li.patient-guideon select { width:240px; } /* sets the width of the dropdown ul and li and li a to be consistent cross-browser. Also, the 'on' and 'off' states are set so that the dropdown works while the main nav item is in its 'on' state. This is messy due to cross-browser cascade issues, but it works */ #nav li.patient-guide ul, #nav li.patient-guide a ul, #nav li.patient-guide ul li a, #nav li.patient-guide a ul li a, #nav li.patient-guideon ul, #nav li.patient-guideon a ul, #nav li.patient-guideon ul li a, #nav li.patient-guideon a ul li a { width:135px; } /* sets the top, bottom and stretch image for the dropdowns. Again, styles for both 'on' and 'off' states here so that the dropdown will work if you are on a main nav index page #nav li.patient-guide .mainnav, #nav li.patient-guide a .mainnav, #nav li.patient-guideon .mainnav, #nav li.patient-guideon a .mainnav { background:url(/assets/images/bg_nav_patient_top.gif) 0 0 no-repeat; } #nav li.patient-guide .mainnav .mainnav, #nav li.patient-guide a .mainnav .mainnav, #nav li.patient-guideon .mainnav .mainnav, #nav li.patient-guideon a .mainnav .mainnav { background:url(/assets/images/bg_nav_patient_bottom.gif) 0 100% no-repeat; } #nav li.patient-guide .mainnav .mainnav .mainnav, #nav li.patient-guide a .mainnav .mainnav .mainnav, #nav li.patient-guideon .mainnav .mainnav .mainnav, #nav li.patient-guideon a .mainnav .mainnav .mainnav { background:url(/assets/images/bg_nav_patient.gif) 0 0 repeat-y; } */ #nav li.patient-guide .mainnav, #nav li.patient-guide a .mainnav, #nav li.patient-guideon .mainnav, #nav li.patient-guideon a .mainnav { background:url(/assets/images/bg_nav_sprite.gif) -400px 0 no-repeat; } #nav li.patient-guide .mainnav .mainnav, #nav li.patient-guide a .mainnav .mainnav, #nav li.patient-guideon .mainnav .mainnav, #nav li.patient-guideon a .mainnav .mainnav { background:url(/assets/images/bg_nav_sprite.gif) -400px 100% no-repeat; } #nav li.patient-guide .mainnav .mainnav .mainnav, #nav li.patient-guide a .mainnav .mainnav .mainnav, #nav li.patient-guideon .mainnav .mainnav .mainnav, #nav li.patient-guideon a .mainnav .mainnav .mainnav { background:url(/assets/images/bg_sprite_repeat.gif) -400px 0 repeat-y; } /* SERVICES */ /* sets all three .mainnav to the set width of its background image (set below) */ #nav li.services div, #nav li.serviceson div { width:248px; } #nav li.services .navbox, #nav li.serviceson .navbox { width:226px; background:#daf4ff url(/assets/images/bg_navbox_services_top.gif) 0 0 no-repeat; } #nav li.services .navbox .navbox, #nav li.serviceson .navbox .navbox { background: url(/assets/images/bg_navbox_services_bottom.gif) 0 100% no-repeat; } #nav li .services_atoz { width:208px !important; margin-top:6px; } #nav li .services_atoz a { width:21px !important; height:19px; border-right:2px solid #daf4ff; border-bottom:2px solid #daf4ff; padding-top:2px; display:block; font-size:11px; font-weight:bold; float:left; text-align:center; color:#207aa2; background:#ebf9ff; } #nav li .services_atoz a { text-decoration:none; background:#fff; } /* sets the width of the dropdown ul and li and li a to be consistent cross-browser. Also, the 'on' and 'off' states are set so that the dropdown works while the main nav item is in its 'on' state. This is messy due to cross-browser cascade issues, but it works */ #nav li.services ul, #nav li.services a ul, #nav li.services ul li a, #nav li.services a ul li a, #nav li.serviceson ul, #nav li.serviceson a ul, #nav li.serviceson ul li a, #nav li.serviceson a ul li a { width:105px; } /* sets the top, bottom and stretch image for the dropdowns. Again, styles for both 'on' and 'off' states here so that the dropdown will work if you are on a main nav index page #nav li.services .mainnav, #nav li.services a .mainnav, #nav li.serviceson .mainnav, #nav li.serviceson a .mainnav { background:url(/assets/images/bg_nav_services_top.gif) 0 0 no-repeat; } #nav li.services .mainnav .mainnav, #nav li.services a .mainnav .mainnav, #nav li.serviceson .mainnav .mainnav, #nav li.serviceson a .mainnav .mainnav { background:url(/assets/images/bg_nav_services_bottom.gif) 0 100% no-repeat; } #nav li.services .mainnav .mainnav .mainnav, #nav li.services a .mainnav .mainnav .mainnav, #nav li.serviceson .mainnav .mainnav .mainnav, #nav li.serviceson a .mainnav .mainnav .mainnav { background:url(/assets/images/bg_nav_services.gif) 0 0 repeat-y; } */ #nav li.services .mainnav, #nav li.services a .mainnav, #nav li.serviceson .mainnav, #nav li.serviceson a .mainnav { background:url(/assets/images/bg_nav_sprite.gif) -730px 0 no-repeat; } #nav li.services .mainnav .mainnav, #nav li.services a .mainnav .mainnav, #nav li.serviceson .mainnav .mainnav, #nav li.serviceson a .mainnav .mainnav { background:url(/assets/images/bg_nav_sprite.gif) -730px 100% no-repeat; } #nav li.services .mainnav .mainnav .mainnav, #nav li.services a .mainnav .mainnav .mainnav, #nav li.serviceson .mainnav .mainnav .mainnav, #nav li.serviceson a .mainnav .mainnav .mainnav { background:url(/assets/images/bg_sprite_repeat.gif) -730px 0 repeat-y; } /* HEALTH EDUCATION */ /* sets all three .mainnav to the set width of its background image (set below) */ #nav li.health-education div, #nav li.health-educationon div { width:167px; } /* sets the width of the dropdown ul and li and li a to be consistent cross-browser. Also, the 'on' and 'off' states are set so that the dropdown works while the main nav item is in its 'on' state. This is messy due to cross-browser cascade issues, but it works */ #nav li.health-education ul, #nav li.health-education a ul, #nav li.health-education ul li a, #nav li.health-education a ul li a, #nav li.health-educationon ul, #nav li.health-educationon a ul, #nav li.health-educationon ul li a, #nav li.health-educationon a ul li a { width:135px; } /* sets the top, bottom and stretch image for the dropdowns. Again, styles for both 'on' and 'off' states here so that the dropdown will work if you are on a main nav index page #nav li.health-education .mainnav, #nav li.health-education a .mainnav, #nav li.health-educationon .mainnav, #nav li.health-educationon a .mainnav { background:url(/assets/images/bg_nav_health_top.gif) 0 0 no-repeat; } #nav li.health-education .mainnav .mainnav, #nav li.health-education a .mainnav .mainnav, #nav li.health-educationon .mainnav .mainnav, #nav li.health-educationon a .mainnav .mainnav { background:url(/assets/images/bg_nav_health_bottom.gif) 0 100% no-repeat; } #nav li.health-education .mainnav .mainnav .mainnav, #nav li.health-education a .mainnav .mainnav .mainnav, #nav li.health-educationon .mainnav .mainnav .mainnav, #nav li.health-educationon a .mainnav .mainnav .mainnav { background:url(/assets/images/bg_nav_health.gif) 0 0 repeat-y; } */ #nav li.health-education .mainnav, #nav li.health-education a .mainnav, #nav li.health-educationon .mainnav, #nav li.health-educationon a .mainnav { background:url(/assets/images/bg_nav_sprite.gif) -990px 0 no-repeat; } #nav li.health-education .mainnav .mainnav, #nav li.health-education a .mainnav .mainnav, #nav li.health-educationon .mainnav .mainnav, #nav li.health-educationon a .mainnav .mainnav { background:url(/assets/images/bg_nav_sprite.gif) -990px 100% no-repeat; } #nav li.health-education .mainnav .mainnav .mainnav, #nav li.health-education a .mainnav .mainnav .mainnav, #nav li.health-educationon .mainnav .mainnav .mainnav, #nav li.health-educationon a .mainnav .mainnav .mainnav { background:url(/assets/images/bg_sprite_repeat.gif) -990px 0 repeat-y; } /* LOCATIONS */ /* sets all three .mainnav to the set width of its background image (set below) */ #nav li.locations div, #nav li.locationson div { width:394px; } #nav li.locations .navbox, #nav li.locationson .navbox { width:373px; background:#daf4ff url(/assets/images/bg_navbox_locations_top.gif) 0 0 no-repeat; } #nav li.locations .navbox .navbox, #nav li.locationson .navbox .navbox { background: url(/assets/images/bg_navbox_locations_bottom.gif) 0 100% no-repeat; } #nav li.locations select, #nav li.doctor-finderon select { width:158px; } /* sets the width of the dropdown ul and li and li a to be consistent cross-browser. Also, the 'on' and 'off' states are set so that the dropdown works while the main nav item is in its 'on' state. This is messy due to cross-browser cascade issues, but it works */ #nav li.locations ul.col1, #nav li.locations a ul.col1, #nav li.locations ul.col1 li a, #nav li.locations a ul.col1 li a, #nav li.locationson ul.col1, #nav li.locationson a ul.col1, #nav li.locationson ul.col1 li a, #nav li.locationson a ul.col1 li a { width:190px; } #nav li.locations ul.col2, #nav li.locations a ul.col2, #nav li.locations ul.col2 li a, #nav li.locations a ul.col2 li a, #nav li.locationson ul.col2, #nav li.locationson a ul.col2, #nav li.locationson ul.col2 li a, #nav li.locationson a ul.col2 li a { width:150px; } /* sets the top, bottom and stretch image for the dropdowns. Again, styles for both 'on' and 'off' states here so that the dropdown will work if you are on a main nav index page #nav li.locations .mainnav, #nav li.locations a .mainnav, #nav li.locationson .mainnav, #nav li.locationson a .mainnav { background:url(/assets/images/bg_nav_locations_top.gif) 0 0 no-repeat; } #nav li.locations .mainnav .mainnav, #nav li.locations a .mainnav .mainnav, #nav li.locationson .mainnav .mainnav, #nav li.locationson a .mainnav .mainnav { background:url(/assets/images/bg_nav_locations_bottom.gif) 0 100% no-repeat; } #nav li.locations .mainnav .mainnav .mainnav, #nav li.locations a .mainnav .mainnav .mainnav, #nav li.locationson .mainnav .mainnav .mainnav, #nav li.locationson a .mainnav .mainnav .mainnav { background:url(/assets/images/bg_nav_locations.gif) 0 0 repeat-y; } */ #nav li.locations .mainnav, #nav li.locations a .mainnav, #nav li.locationson .mainnav, #nav li.locationson a .mainnav { background:url(/assets/images/bg_nav_sprite.gif) -1170px 0 no-repeat; } #nav li.locations .mainnav .mainnav, #nav li.locations a .mainnav .mainnav, #nav li.locationson .mainnav .mainnav, #nav li.locationson a .mainnav .mainnav { background:url(/assets/images/bg_nav_sprite.gif) -1170px 100% no-repeat; } #nav li.locations .mainnav .mainnav .mainnav, #nav li.locations a .mainnav .mainnav .mainnav, #nav li.locationson .mainnav .mainnav .mainnav, #nav li.locationson a .mainnav .mainnav .mainnav { background:url(/assets/images/bg_sprite_repeat.gif) -1170px 0 repeat-y; } /* ABOUT US */ /* sets all three .mainnav to the set width of its background image (set below) */ #nav li.about-us div, #nav li.about-uson div { width:260px; } /* sets the width of the dropdown ul and li and li a to be consistent cross-browser. .col1 and .col2 (set on the ul) allow you to set different widths for dropdown columns so that they look nice. Also, the 'on' and 'off' states are set so that the dropdown works while the main nav item is in its 'on' state. This is messy due to cross-browser cascade issues, but it works */ #nav li.about-us ul.col1, #nav li.about-us a ul.col1, #nav li.about-us ul.col1 li a, #nav li.about-us a ul.col1 li a, #nav li.about-uson ul.col1, #nav li.about-uson a ul.col1, #nav li.about-uson ul.col1 li a, #nav li.about-uson a ul.col1 li a { width:90px; } #nav li.about-us ul.col2, #nav li.about-us a ul.col2, #nav li.about-us ul.col2 li a, #nav li.about-us a ul.col2 li a, #nav li.about-uson ul.col2, #nav li.about-uson a ul.col2, #nav li.about-uson ul.col2 li a, #nav li.about-uson a ul.col2 li a { width:132px; } /* sets the top, bottom and stretch image for the dropdowns. Again, styles for both 'on' and 'off' states here so that the dropdown will work if you are on a main nav index page #nav li.about-us .mainnav, #nav li.about-us a .mainnav, #nav li.about-uson .mainnav, #nav li.about-uson a .mainnav { background:url(/assets/images/bg_nav_about_top.gif) 0 0 no-repeat; } #nav li.about-us .mainnav .mainnav, #nav li.about-us a .mainnav .mainnav, #nav li.about-uson .mainnav .mainnav, #nav li.about-uson a .mainnav .mainnav { background:url(/assets/images/bg_nav_about_bottom.gif) 0 100% no-repeat; } #nav li.about-us .mainnav .mainnav .mainnav, #nav li.about-us a .mainnav .mainnav .mainnav, #nav li.about-uson .mainnav .mainnav .mainnav, #nav li.about-uson a .mainnav .mainnav .mainnav { background:url(/assets/images/bg_nav_about.gif) 0 0 repeat-y; } */ #nav li.about-us .mainnav, #nav li.about-us a .mainnav, #nav li.about-uson .mainnav, #nav li.about-uson a .mainnav { background:url(/assets/images/bg_nav_sprite.gif) -1580px 0 no-repeat; } #nav li.about-us .mainnav .mainnav, #nav li.about-us a .mainnav .mainnav, #nav li.about-uson .mainnav .mainnav, #nav li.about-uson a .mainnav .mainnav { background:url(/assets/images/bg_nav_sprite.gif) -1580px 100% no-repeat; } #nav li.about-us .mainnav .mainnav .mainnav, #nav li.about-us a .mainnav .mainnav .mainnav, #nav li.about-uson .mainnav .mainnav .mainnav, #nav li.about-uson a .mainnav .mainnav .mainnav { background:url(/assets/images/bg_sprite_repeat.gif) -1580px 0 repeat-y; } /* MAKES THE HOVER 'STICK' IN FIREFOX */ /* CLASS 'drop' MUST BE ON THE 'href', NOT THE 'li' OR IT WILL NOT WORK */ #nav ul a.drop:hover, #nav ul :hover > a.drop{ color:#041527; background:white !important; } /* END MAIN NAVIGATION ********************************************************************************************************************************************************************************************** END MAIN NAVIGATION */