html - 如何格式化下拉菜单的 CSS，以便如果 'parent' 下拉菜单是当前的，则子项将不会采用父项的格式

Question

当“事件/当前”页面时，如何阻止下拉列表的子项继承父项/标题格式。例如下面。当菜单项是当前事件页面时，它会突出显示为绿色。 “关于我们”是一个单独的页面，也是“我们做什么等”的父级下拉菜单。

查看我的 css，如果我保持当前的 .active 伪类，当“关于我们”被赋予类“事件”时，“关于我们”会突出显示，但它的下拉项也是如此。然后这会改变定位并填充菜单。

要解决这个问题，我需要制作更多的类/ID 并在格式上更加具体，还是有一种更快、更合乎逻辑的方法来仅突出显示父级。

工作示例:

a) 主页为“事件”: http://jsfiddle.net/homer5677/r4XeS/

b) 关于我们“活跃”: http://jsfiddle.net/homer5677/KKuf3/

代码:

主页 HTML

<div id='cssmenu'>
  <ul>
    <li class='active'><a href='index 2.html'><span>Home</span></a></li>
    <li class='has-sub'><a href='aboutus.html'><span>About Us</span></a>
       <ul>
          <li><a href='ourhistory.html'><span>Our History</span></a></li>
          <li><a href='whychooseus.html'><span>Why Choose Us</span></a></li>
          <li class='last'><a href='testimonials.html'><span>Testimonials</span></a></li>
      </ul>
   </li>`
  </ul>
</div>`

关于我们 HTML

<div id='cssmenu'>
  <ul>
    <li ><a href='index 2.html'><span>Home</span></a></li>
    <li class='has-sub, active'><a href='aboutus.html'><span>About Us</span></a>
      <ul>
        <li><a href='ourhistory.html'><span>Our History</span></a></li>
        <li><a href='whychooseus.html'><span>Why Choose Us</span></a></li>
        <li class='last'><a href='testimonials.html'><span>Testimonials</span></a></li>
     </ul>
   </li> 
 </ul>
</div>

CSS

 #cssmenu {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
  font-size: 18px;
  line-height: 15px;
  text-transform: uppercase;
  text-align: left;
   margin-left: 0%; /*to get over 10%*-fixed now*/


 }

#cssmenu > ul {
  width: auto;
  list-style-type: none;
  padding-left: 10%;
  margin-left: 0;
  background: #222222;
 border-bottom: 5px solid #6ec919;
 /*fix border whole way*/
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;

 }

#cssmenu > ul li#responsive-tab {
  display: none;
  /* Hide for large screens */

}

#cssmenu > ul li {
 display: inline-block;
 *display: inline;
  zoom: 1;
 margin-right: 0px;/**/
 margin-left: -5px;/* get rid of tiny space between items*/
 padding-left: 0px;/**/
}

#cssmenu > ul li.right {
 float: right;
}

#cssmenu > ul li.has-sub {
 position: relative;

}
#cssmenu > ul li.has-sub:hover ul {
 display: block;
 }

#cssmenu > ul li.has-sub ul {
 display: none;
 width: 250px;
 position: absolute;
 margin: 0px;
 padding: 0px;
 list-style-type: none;
 background: #222222;
 /*border: 1px solid #6ec919;
  /* fix for best---border-left: 2px solid #6ec919; */
  border-bottom: 5px solid #6ec919; /* or 5 to match above*/
  border-top: 0 none;
  font-size: 14px;
 }
 #cssmenu > ul li.has-sub ul li {
  display: block;
  }


 #cssmenu > ul li.quote a {

  color: #6ec919;
 }

 #cssmenu > ul li.has-sub > a {
  background-image: url('images/caret.png');
  background-repeat: no-repeat;
  background-position: 90% -95%;
  }

 #cssmenu > ul li.has-sub > a.active,
 #cssmenu > ul li.has-sub > a:hover {
  background: #6ec919 url('images/caret.png') no-repeat;
  background-position: 90% 195%;
  }

 #cssmenu > ul li a {
  display: block;
  padding: 12px 24px 11px 24px;
  text-decoration: none;
 color: #ffffff;

 }



 /*active on hover below */
#cssmenu > ul li.active{
 background: #6ec919;
 color: #fff;
}

 #cssmenu > ul li.active a:hover{

  color: #000;
 }
 /*above*/


 #cssmenu > ul li a:hover {
  background: #6ec919;
  color: #fff;
 }

Answer 1

然后这样做，

然后在 #cssmenu > ul > li:hover 上进行相同的更改

并删除 #cssmenu > ul li a:hover 部分。这将产生如下链接的效果，

http://jsfiddle.net/r4XeS/3/