css如何在导航栏中为当前页面设置不同的颜色?

时间:2013-10-20 11:45:13

标签: html css html5 uinavigationbar

您好我是html&的新手css和我有问题。我做了一个导航栏,想通过更改导航栏中的背景颜色向用户显示他所在的页面。但由于某种原因,这种方法效果不佳。请帮帮我。

这是我用于导航栏的css代码:

#nav{
  width: 60%;
  display: inline-block;
  text-align: right;
  float: right;
}
/* unorded list */
#nav ul{}

#nav ul li{
  display: inline-block;
  height: 62px;
}
/* text in blokken */
#nav ul li a{
  padding: 20px;
  background: orange;
  color: white;
}

 #nav ul li a:hover{
  background-color: #ff1e42;
  box-shadow: 0px 1px 1px #666;
  text-decoration: underline;
 }
#nav ul li #inuse {
  background-color: #ff1e42;
}

我的HTML代码如下所示:

<div id="nav">
    <ul>
        <li><a class="inuse" href="../html/index.html" >Home</a></li>
        <li><a href="../html/kleding.html" >Kleding</a></li>
        <li><a href="../html/bestel.html" >Bestellen</a></li>
        <li><a href="../html/contact.html">Contact</a></li>
        <li><a href="../html/vragen.html" >Vragen</a></li>
    </ul>
</div>

提前致谢。

1 个答案:

答案 0 :(得分:5)

尝试:

#nav ul li a.inuse{/* in use css */}

而不是:

#nav ul li #inuse{}

希望有所帮助