/*------------------------------------------------------------ NAVIGATION LAYOUT styles -------------------------------------------------------------*/ #crumb_nav { width: 890px; height: 20px; font-size: 10px; text-align: right; padding: 20px 0 0 0; color: #fff; } #nav_container_bg { background: url(../images/nav_bg.gif) top center; width: 900px; height: 59px; } /*------------------------------------------------------------ MAIN NAVIGATION styles -------------------------------------------------------------*/ #contain-nav { /* container for ul */ height: 59px; width: 582px; float:left; clear:right; margin: 0; padding: 0; position:relative; display:inline; background-color:#989999; background: transparent url('../images/nav.jpg') repeat-x; } #header-nav { /* the nav UL */ margin: 0; padding: 0; list-style: none; color:#fff; height:59px; width: 582px; background: transparent url('../images/nav.gif') 0 0 no-repeat; position:relative; } #header-nav li{ margin: 0px; padding: 0px; list-style:none; position: absolute; top:0; text-indent: -8000em; } div#contain-nav ul#header-nav li { margin: 0; padding: 0; list-style: none; position: absolute; text-indent: -8000em; top: 0; } ul#header-nav li, ul#header-nav a { height: 59px; display: block; text-indent: -8000em; } div#contain-nav ul#header-nav li a { text-decoration: none; padding: 0px 0px 0px 0px; height: 59px !important; height /**/:42px; overflow:hidden; font-size: 5px; text-indent: -8000em; } #nav_home {left: 0px; width: 56px;} #nav_about {left: 56px; width: 62px; } #nav_media {left: 118px; width: 122px; } #nav_testimonials {left: 240px; width: 112px; } #nav_press {left: 352px; width: 60px; } #nav_blog {left: 412px; width: 95px; } #nav_contact {left: 507px; width: 75px; } #nav_home a:hover {background: transparent url('../images/nav.gif') 0 -59px no-repeat;} #nav_about a:hover {background: transparent url('../images/nav.gif') -56px -59px no-repeat;} #nav_media a:hover {background: transparent url('../images/nav.gif') -118px -59px no-repeat; } #nav_testimonials a:hover {background: transparent url('../images/nav.gif') -240px -59px no-repeat; } #nav_press a:hover {background: transparent url('../images/nav.gif') -352px -59px no-repeat; } #nav_blog a:hover {background: transparent url('../images/nav.gif') -412px -59px no-repeat; } #nav_contact a:hover {background: transparent url('../images/nav.gif') -507px -59px no-repeat; } /* these classes will keep the onstate actived once the user clicks on that page. Simply put the code in the body tag like this >>>> */ body.nav_home #nav_home a {background: transparent url('../images/nav.gif') 0 -59px no-repeat;} body.nav_about #nav_about a {background: transparent url('../images/nav.gif') -56px -59px no-repeat;} body.nav_media #nav_media a {background: transparent url('../images/nav.gif') -118px -59px no-repeat; } body.nav_testimonials #nav_testimonials a {background: transparent url('../images/nav.gif') -240px -59px no-repeat; } body.nav_press #nav_press a {background: transparent url('../images/nav.gif') -352px -59px no-repeat; } body.nav_blog #nav_blog a {background: transparent url('../images/nav.gif') -412px -59px no-repeat; } body.nav_contact #nav_contact a {background: transparent url('../images/nav.gif') -507px -59px no-repeat; } /*------------------------------------------------------------ SUB NAVIGATION styles -------------------------------------------------------------*/ #subnav { width:900px; height: 22px; } #subnav li {display: inline; margin: 0; padding: 0 10px;} #subnav li a {color: white; text-decoration: none;} #subnav li a:hover, #subnav li a.here {color: #80e7f8;} #subnav ul { clear: right; display: none; font-size: 12px; margin: 0; padding: 0 30px 0 0; text-align: right; } .hidden {display: none;}