Hi friends, Please take a look at my in-progress web re-design at http://www.jessestern.com/newsite Please view using Firefox, because I have not yet even begun to debug with IE. My question: In the nav menu, I am using PHP to set a class ="currentpage" to the current page's <li> tag. I am using id's in the <li> tags to load the background images, and i need to access the currentpage to move the background-position. Basically, a 3-way switch, but I can't get the code to listen to .currentpage. I probably have the wrong understanding of how classes override id's, or how the whole hierarchy thing works in css, so any pointers would be most appreciated. Code: <li id=about<?php if ($this_page=="About") echo " class=\"currentpage\""; ?>> <a href="index.html"> <span> <em>About</em> </span> </a> </li> and Code: #menu li a { display:block; height:25px; width:120px; background-position:center -28px; cursor:pointer; } /* I want the next line to override the background-position of the previous line, forcing the top of the image to show (instead of the image at -28px) */ #menu li .currentpage a { background-position:center top; } #menu li a:hover span { display: block; position: relative; width:180px; height:48px; left:-34px; top:-8px; z-index: 1; background-position:center bottom; } #menu li#about a, #menu li#about a:hover span { background-image:url(about.png); } And since this is a review thread, I welcome any feeback on my site's humble design.... Oh, and if it helps, here are the source files in question: http://www.jessestern.com/newsite/index.html http://www.jessestern.com/newsite/style/style.css http://www.jessestern.com/newsite/style/about.png
Try removing the space between 'li' and '.currentpage' like this: Code: #menu li.currentpage a { background-position:center top; } HTH, JC