/*------------------------------------------------------------ MAIN NAVIGATION styles -------------------------------------------------------------*/ #contain-nav { /* container for ul */ height: 53px; width: 495px; float:left; margin: 0; padding: 0; position:relative; display:inline; background-color:red; background: transparent url('../img/nav.gif') repeat-x; } #header-nav { /* the nav UL */ margin: 0; padding: 0; list-style: none; color:#fff; height:53px; width: 495px; 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: 53px; display: block; text-indent: -8000em; } div#contain-nav ul#header-nav li a { text-decoration: none; padding: 0px 0px 0px 0px; height: 53px !important; height /**/:42px; overflow:hidden; font-size: 5px; text-indent: -8000em; } #vision {left: 0px; width: 108px;} #about {left: 108px; width: 110px; } #projects {left: 218px; width: 138px;} #contact {left: 356px; width: 139px;} #vision a:hover {background: transparent url('../img/nav.gif') 0 -53px no-repeat;} #about a:hover {background: transparent url('../img/nav.gif') -108px -53px no-repeat;} #projects a:hover {background: transparent url('../img/nav.gif') -218px -53px no-repeat;} #contact a:hover {background: transparent url('../img/nav.gif') -356px -53px 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.vision #vision a {background: transparent url('../img/nav.gif') 0 -53px no-repeat;} body.about #about a {background: transparent url('../img/nav.gif') -108px -53px no-repeat;} body.projects #projects a {background: transparent url('../img/nav.gif') -218px -53px no-repeat;} body.contact #contact a {background: transparent url('../img/nav.gif') -356px -53px no-repeat;}