/*------------------------------------------------------------ NAVIGATION LAYOUT styles -------------------------------------------------------------*/ #nav_container_bg { background: url(../images/nav_bg.jpg) top center; width: 900px; height: 59px; } /*------------------------------------------------------------ MAIN NAVIGATION styles -------------------------------------------------------------*/ #contain-nav { /* container for ul */ height: 59px; width: 580px; float:left; clear:right; margin: 0; padding: 0; position:relative; display:inline; background-color:none; background: transparent url('../images/nav.gif') 0 0 repeat-x; } #header-nav { /* the nav UL */ margin: 0; padding: 0; list-style: none; color:#fff; height:59px; width: 580px; 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: 65px;} #nav_about {left: 65px; width: 75px; } #nav_media {left: 140px; width: 130px; } #nav_testimonials {left: 270px; width: 123px; } #nav_blog {left: 393px; width: 104px; } #nav_contact {left: 497px; width: 83px; } #nav_home a:hover {background: transparent url('../images/nav.gif') 0 -59px no-repeat;} #nav_about a:hover {background: transparent url('../images/nav.gif') -65px -59px no-repeat;} #nav_media a:hover {background: transparent url('../images/nav.gif') -140px -59px no-repeat; } #nav_testimonials a:hover {background: transparent url('../images/nav.gif') -270px -59px no-repeat; } #nav_blog a:hover {background: transparent url('../images/nav.gif') -393px -59px no-repeat; } #nav_contact a:hover {background: transparent url('../images/nav.gif') -497px -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') -65px -59px no-repeat;} body.nav_media #nav_media a {background: transparent url('../images/nav.gif') -140px -59px no-repeat; } body.nav_testimonials #nav_testimonials a {background: transparent url('../images/nav.gif') -270px -59px no-repeat; } body.nav_blog #nav_blog a {background: transparent url('../images/nav.gif') -393px -59px no-repeat; } body.nav_contact #nav_contact a {background: transparent url('../images/nav.gif') -497px -59px no-repeat; } /*------------------------------------------------------------ SUB NAVIGATION styles -------------------------------------------------------------*/ /*------------------------------------------------------------ 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; text-align: right; } .hidden {display: none;}