突出显示当前页面上的菜单

Question

我不明白为什么菜单不会在当前页面上突出显示？ on .menu ul li a:hover, .active {color: #788d35} 如果我输入“背景颜色”而不是“颜色”，它将起作用。如果当前页面处于活动状态，如何仅突出显示文本？

HTML：

<section class="menu">
        <ul>
            <li><a class="active" href="home.html"> HOME </a></li>
            <li><a href="#"> PORTFOLIO </a>
                <ul>
                    <li><a href="#"> illustrations </a></li>
                    <li><a href="#"> portraits </a></li>
                    <li><a href="#"> environments </a></li>
                    <li><a href="#"> sketches </a></li>
                </ul>
            </li>

            <li><a href="#"> STORE </a>
              <ul>
                    <li><a href="http://society6.com/ChristiLu" target="_blank"> society6 </a></li>
                    <li><a href="http://www.redbubble.com/people/christisocool/shop" target="_blank"> redbubble </a></li>
                </ul>
            </li>
            <li><a href="#"> CONTACT </a></li>
    <li><a href="about.html"> ABOUT </a></li>
        </ul>

    </section>

CSS：

.menu {
  height: 29px;
  width: 100%;
  /*background:orange;*/
}
.menu ul {
  width: auto;
  list-style-type: none;
  font-family: "calibri", "arial";
}
.menu ul li {
  position: relative;
  display: inline;
  float: left;
  width: auto;
  border-right: 2px solid purple;
  margin-left: 10px;
  line-height: 12px;
}
.menu ul li:last-child {
  border: none;
}
/*removes border after 'about'*/

.menu ul li a {
  display: block;
  padding: 3px;
  color: #854288;
  text-decoration: none;
  font-size: 20px;
  font-weight: strong;
  padding-right: 25px;
}
.menu ul li a:hover,
.active {
  color: #788d35
  /* <-- if I put "background-color" instead of "color"    it will work. How do I highlight just the text if current page is active? */
}
.menu ul li ul {
  display: none;
}
.menu ul li:hover > ul {
  display: block;
  position: absolute;
  top: 22px;
  float: left;
  text-align: left;
  z-index: 1000;
  background-color: white;
}
.menu ul li ul li {
  position: relative;
  max-width: 140px;
  min-width: 140px;
  width: 100%;
  border: none;
  margin-left: -40px;
}
.menu ul li ul li a {
  padding: 4px;
  margin-left: 1px;
}

Answer 1

您的.active 选择器被.menu ul li a 选择器否决。因此，您可以将.active 选择器更改为.menu ul li a.active 或将颜色属性color: #788d35; 更改为color: #788d35 !important;

见：http://jsfiddle.net/5mpjj/

欲了解更多信息：http://hungred.com/useful-information/css-priority-order-tips-tricks/