#nav_wrap { width: 960px; height: 44px; float: left; } /*------------------------------------------------------------ MAIN NAVIGATION styles -------------------------------------------------------------*/ #contain-nav { /* container for ul */ height: 44px; width: 960px; float:left; clear:left; margin: 5px 0 0 31px; padding: 0; position:relative; display:inline; background-color:#3c78b4; background: transparent url('../img/nav.gif') no-repeat; } #header-nav { /* the nav UL */ margin: 0; padding: 0; list-style: none; color:#fff; height:44px; width: 960px; 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: 44px; display: block; text-indent: -8000em; } div#contain-nav ul#header-nav li a { text-decoration: none; padding: 0px 0px 0px 0px; height: 44px !important; height /**/:42px; overflow:hidden; font-size: 5px; text-indent: -8000em; } #nav_home {left: 0px; width: 66px;} #nav_company {left: 66px; width: 114px; } #nav_products {left: 180px; width: 88px;} #nav_techdata {left: 268px; width: 123px;} #nav_brochure {left: 391px; width: 91px; } #nav_awardsreviews {left: 482px; width: 147px; } #nav_gallery {left: 629px; width: 75px; } #nav_manual {left: 704px; width: 75px; } #nav_warranty {left: 779px; width: 93px; } #nav_contacts {left: 872px; width: 88px; } #nav_home a:hover {background: transparent url('../img/nav.gif') 0 -44px no-repeat;} #nav_company a:hover {background: transparent url('../img/nav.gif') -66px -44px no-repeat;} #nav_products a:hover {background: transparent url('../img/nav.gif') -180px -44px no-repeat;} #nav_techdata a:hover {background: transparent url('../img/nav.gif') -268px -44px no-repeat;} #nav_brochure a:hover {background: transparent url('../img/nav.gif') -391px -44px no-repeat; } #nav_awardsreviews a:hover {background: transparent url('../img/nav.gif') -482px -44px no-repeat; } #nav_gallery a:hover {background: transparent url('../img/nav.gif') -629px -44px no-repeat; } #nav_manual a:hover {background: transparent url('../img/nav.gif') -704px -44px no-repeat; } #nav_warranty a:hover {background: transparent url('../img/nav.gif') -779px -44px no-repeat; } #nav_contacts a:hover {background: transparent url('../img/nav.gif') -872px -44px 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('../img/nav.gif') 0 -44px no-repeat;} body.nav_company #nav_company a {background: transparent url('../img/nav.gif') -66px -44px no-repeat;} body.nav_products #nav_products a {background: transparent url('../img/nav.gif') -180px -44px no-repeat;} body.nav_techdata #nav_techdata a {background: transparent url('../img/nav.gif') -268px -44px no-repeat;} body.nav_brochure #nav_brochure a {background: transparent url('../img/nav.gif') -391px -44px no-repeat; } body.nav_awardsreviews #nav_awardsreviews a {background: transparent url('../img/nav.gif') -482px -44px no-repeat; } body.nav_gallery #nav_gallery a {background: transparent url('../img/nav.gif') -629px -44px no-repeat; } body.nav_manual #nav_manual a {background: transparent url('../img/nav.gif') -704px -44px no-repeat; } body.nav_warranty #nav_warranty a {background: transparent url('../img/nav.gif') -779px -44px no-repeat; } body.nav_contacts #nav_contacts a {background: transparent url('../img/nav.gif') -872px -44px no-repeat; }