Question

我正在尝试使用css来指定查看器所在的页面，但它不会突出显示。这是我的代码：

HTML：

 <ul class="side-nav">
 <a href="http://www.cieloazulsantafe.com/nav-test.html"><li><span>Home</span></li></a>
 <a href="http://www.cieloazulsantafe.com/sample-page.html"><li>
 <span>Sample Page</span></li></a>
 </ul>

CSS：

 ul.side-nav span{
  margin-left: 50px;    
  text-decoration: none;
  color: #fff;
  }
 ul.side-nav a li{
 background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad.png');
 list-style: none;
 height: 41px;
 width: 250px;
 line-height: 2.0;
 text-decoration: none;
 }
 ul.side-nav a li:hover{
 background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');   
 }
 ul.side-nav a li.current-menu-item{
 background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
a{
text-decoration: none;  
}

似乎很简单，但我无法让背景改变。我知道它因为它的li元素，但我猜“current-menu-item”顺序是错误的。

网址：http://cieloazulsantafe.com/nav-test.html 提前谢谢。

Answer 1

您必须为正文命名（给它一个id）和li标记，并在css中分别引用它们。这是最简单，最纯粹的CSS方式。

<强> HTML

<body id="home-body"> // ... on your home page

...

<body id="about-body"> // ... on your about page

您的导航

<li id="home-menu">Home</li>
<li id="about-menu">About</li>

<强> CSS

body#home-body li#home-menu, body#about-body li#about-menu { // style of the active menu item }

您可能希望查看我在以下问题中提供的答案：How can I use one Nav Bar code on multiple pages, BUT have the current page highlighted?

编辑：这是“纯粹的CSS”方式;但根据您的需求，可能还有其他方式沿着这条路走下去。

Answer 2

检查此问题http://jsfiddle.net/luckmattos/aN2ny/

你的HTML和CSS被破坏了：

HTML

<ul class="side-nav">
<li><a href="#">Home</a></li>
<li class="current-menu-item"><a href="#">Current</a></li>
</ul>

<a>必须在<li>内，将文字属性放在<a>上。最重要的是，您忘记将课程current-menu-item放在当前的<li>上。

CSS

ul.side-nav {
    margin-left: 50px;    
    text-decoration: none;
    padding:0px;
    list-style: none;
    width: 250px;
 }
 ul.side-nav li{
     padding:0px;
     margin:0px;
     display:block;
     background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad.png');
     height: 41px;
     cursor:pointer;  
 }
ul.side-nav li a {
    margin:0px;
    display:block;
    padding-left:50px;
    text-decoration:none;
    color: #fff;
    height:41px;
    line-height:41px;
}
ul.side-nav li a:hover, 
ul.side-nav li.current-menu-item {
     background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');   
 }

有几个小的改动，看看代码。

当前菜单页面项目背景不更改 - CSS

2 个答案:

检查此问题http://jsfiddle.net/luckmattos/aN2ny/

HTML

CSS