我正在wordpress中构建一个自定义网站。在我的 CSS 中，我已经能够为我的主导航获得除活动状态之外的所有样式正确。除了在悬停时带有下划线的导航项外，我还希望在您在所选页面上时保持下划线。我似乎无法弄清楚我的代码中出了什么问题。
.CSS
body {
background:#cfcfcf;
padding:0px;
margin:0px;
}
#content {
font-size:14px;
font-family:Arial, Sans-Serif;
}
#box {
background:white;
width:824px;
min-height:650px;
margin:auto;
}
#copy {
width:520px;
float:left;
margin-top:0px;
}
#form {
width:235px;
margin-right:20px;
float:right;
}
/*header---------------------------------------------------------------------*/
#header {
width:auto;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
margin-top:0px;
background: transparent no-repeat;
}
#logo{
background: transparent url("http://ahsvegas.com/wp-content/uploads/2015/11/AHS_Vegas_Logo.png") no-repeat;
width:475px;
height:130px;
overflow:hidden;
margin-left:auto;
margin-right:auto;
margin-bottom:35px;
margin-top:80px;
}
/* Pages Nav---------------------------------------------------------------------*/
#topbg {
margin:auto;
padding:0;
overflow:hidden;
background-color:#07094b;
position:absolute;
top:0;
width:100%;
height:70px;
}
#navmenu {
width:784px;
margin:0px auto;
}
#navmenu ul {
list-style-type: none;
display: inline-block;
float:left;
margin:0;
padding:0;
}
#navmenu li {
display:inline-block;
}
#navmenu ul li a {
display:inline-block;
color: white;
font-size:18px;
font-family:Arial, Sans-Serif;
padding:24px 32px 0px 0px;
text-decoration: none;
}
#navmenu ul li a:hover {
text-decoration:underline;
}
#navmenu ul li a:active {
text-decoration:underline;
}
#social {
padding:6px 0px 0px 0px;
float:right;
}
/*post------------------------------------------------------------*/
.post {
color:#000000;
padding:5px 20px;
margin-top:-6px;
}
h1 {
color:#000000;
font-family:Helvetica, Sans-Serif;
font-size: 24px;
text-decoration:none;
margin-top:10px;
}
h3 {
color:#000000;
font-size: 16px;
text-decoration:none;
}
.entry {
color:#000000;
padding:0px 20px 0px 20px;
}
.entrytext {
}
.pagetitle {
}
/*links------------------------------------*/
a {
color:#07094b;
font-size: 13px;
text-decoration:underline;
padding: 0px;
}
a:hover {
color:#000000;
text-decoration:underline;
}
/*Misc -----------------------------------*/
a img {
border:0px;
}
img {
border:0px;
}
.description {
padding:0 5px 15px 5px;
}
.hp-wrap {
display: none;
}
/*footer---------------------------------------*/
footer {
font-family:Arial, Sans-Serif;
text-align:center;
font-size: 12px;
color:#000000;
background:#ffffff;
padding-top: 20px;
padding-bottom: 20px;
margin: 0px auto;
width:824px;
}
footer a {
font-size: 12px;
color:#000000;
text-decoration:none;
}
footer a:hover {
color:#07094b;
text-decoration:underline;
}
标头 PHP：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="distribution" content="global" />
<meta name="robots" content="follow, all" />
<meta name="language" content="it, en" />
<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
<meta name="generator" content="HandymanLasVegas<?php bloginfo('version'); ?>" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/scriptaculous.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/combo.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/lightbox.js"></script>
<?php wp_head(); ?>
<style type="text/css" media="screen">
<!-- @import url( <?php bloginfo('stylesheet_url'); ?> ); -->
</style>
</head>
<body>
<div id="header">
<div id="topbg">
<div id="navmenu">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
<div id="social">
<a href="https://www.facebook.com/American-Handyman-Services-Inc-259437720757501/timeline" target="_blank"><img src="http://ahsvegas.com/wp-content/uploads/2015/12/AHS_Facebook.png" width="55" height="55" /></a>
<a href="mailto:test@test.com"><img src="http://ahsvegas.com/wp-content/uploads/2015/12/AHS_Email.png" width="55" height="55"/></a>
</div>
</div>
</div>
<a title="Home" href="http://www.ahsvegas.com"><div id="logo" style="cursor: pointer;"></div></a>
</div>
<div id="box">
<!-- end header -->
Wordpress在li上添加了类'current_page_item'，所以在你的css中使用#navmenu ul li. current_page_item a而不是#navmenu ul li a:active