我使用CSS精灵进行wordpress导航，为了让它们发挥作用，我需要使用php来显示该部分的当前页面。
CSS：
#sidebarnav ul#sidenav li.visionside a {width:204px; height:53px; background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/vision2.png) 0px 0}
#sidebarnav ul#sidenav li.visionside a:hover {background-position:0px -53px}
#sidebarnav ul#sidenav li.teamside a {width:204px; height:53px; background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/team2.png) 0px 0}
#sidebarnav ul#sidenav li.teamside a:hover {background-position:0px -53px}
#sidebarnav ul#sidenav li.mtlside a {width:204px; height:53px; background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/mtl2.png) 0px 0}
#sidebarnav ul#sidenav li.mtlside a:hover {background-position:0px -53px}
#sidebarnav ul#sidenav li.blogside a {width:204px; height:53px; background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/content2.png) 0px 0}
#sidebarnav ul#sidenav li.blogside a:hover {background-position:0px -53px}
#sidebarnav ul#sidenav li.orgside a {width:204px; height:53px; background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/org2.png) 0px 0}
#sidebarnav ul#sidenav li.orgside a:hover {background-position:0px -53px}
由PHP:触发的标题中的CSS
#sidebarnav ul#sidenav li.<?php echo $current1; ?> {
background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/vision2.png) 0px -106px;
}
#sidebarnav ul#sidenav li.<?php echo $current2; ?> {
background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/team2.png) 0px -106px;
}
#sidebarnav ul#sidenav li.<?php echo $current3; ?> {
background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/content2.png) 0px -106px;
}
#sidebarnav ul#sidenav li.<?php echo $current4; ?> {
background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/org2.png) 0px -106px;
}
PHP：
<?php
if ( is_page('vision') ) { $current1 = 'visionside a'; }
elseif ( is_page('team') ) { $current2 = 'teamside a'; }
elseif ( is_page('commentary') ) { $current3 = 'blogside a'; }
elseif ( is_page('organizations') ) { $current4 = 'orgside a'; }
?>
但是，当用户悬停在导航上时，项目显示的是悬停状态，而不是应该显示的活动状态。
URL：http://jumpthru.net/newsite/vision/
这是一种非常糟糕的方式。忽略常识：
您可以将!important添加到每个background属性中，例如：
background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/vision2.png) 0px -106px !important;
你这样做与WordPress建议的方式微妙不同：
http://codex.wordpress.org/Dynamic_Menu_Highlighting
我认为你应该更仔细地阅读那个教程，并重做这个。
我非常同意@thirtydot的说法，因为可能有一种更简单的WP方法可以将类添加到活动链接中。。但要遵循你的逻辑，你可以让整个事情变得更简单。
首先是CSS。虽然我确实从你的页面文件中复制了更多，但你可以删除很多重复的声明，这样每个特定链接只需要背景图像。。原始大小、背景位置等不会改变，所以这样的东西更容易阅读：
#sidenav {
width:204px;
list-style:none;
margin:0;
padding: 0;
padding-bottom:40px;
float:left;
}
#sidenav li {
float:left;
width: 100%;
}
#sidenav li a {
display: block;
height:53px;
background-repeat: no-repeat;
background-position: 0 0;
text-indent: -9999px;
}
#sidenav li a:hover {
background-position: 0 -53px;
}
#sidenav li.visionside a {background-image : url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/vision2.png);}
#sidenav li.teamside a {background-image : url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/team2.png);}
#sidenav li.mtlside a {background-image : url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/mtl2.png);}
#sidenav li.blogside a {background-image: url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/content2.png);}
#sidenav li.orgside a {background-image: url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/org2.png);}
现在，您的"活动"状态只需要一个相关链接即可将其background-position更改为0 -106px-无需再次声明图像
所以你的PHP逻辑可能是这样的（可能更简单），但我正在尝试使用你所拥有的：
<?php
if ( is_page('vision') ) { $current = 'visionside'; }
elseif ( is_page('team') ) { $current = 'teamside'; }
elseif ( is_page('???') ) { $current = 'mtlside'; }
elseif ( is_page('commentary') ) { $current = 'blogside'; }
elseif ( is_page('organizations') ) { $current = 'orgside'; }
?>
注意：使用了相同的变量（您的mtlside链接需要替换问号）。。然后<head>样式中的行只需要读取：
#sidenav li.<?php echo $current ?> a {
background-position: 0px -106px;
}
这样，它将只是一个越来越具体的链接，显示"活动页面"的背景位置。
我不确定你到底想让你的悬停做什么，但a:hover规则不会覆盖新的"活动"选择器，因为上面<head>样式中的规则更具体，如果你真的想让活动链接显示与正常相同的:hover状态，你需要让样式表中的a:hover规则更具体——你可以这样做：
#sidebarnav #sidenav li a:hover {
background-position: 0 -53px;
}
注意，我从样式表选择器中删除了双ID，因为不需要它们，一个ID就足够了。。但如果需要，您可以使用第二个ID（#sidbarnav），以使最后一条规则在需要特定性的情况下更加"加权"。