如果子或孙链接使用CSS激活,则设置父链接处于活动状态?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (62)

我有一个HTML/CSS菜单,这个CSS用于活动链接:

.navigation ul li a:hover, .navigation .active-nav {
    background-color: #F36F25; /*#373737;*/
    text-shadow: none;
    color: #f7f7f7 !important;
    -webkit-box-shadow: 0 3px 0 #ff8833;
    box-shadow: 0 3px 0 #ff8833;
}
提问于
用户回答回答于
  • 在这里,你应用你想要的风格:hover国家:
li:hover a {
  color: orange;
  font-weight: 700
}
  • 现在你要阻止li孩子们正在徘徊
li:hover li a {
  color: none;
  font-weight: 400
}

最后,你重新做:hoverli儿童

li:hover li:hover a {
  color: orange;
  font-weight: 700
}

下面是一段代码

li:hover a {
  color: orange;
  font-weight: 700
}
li:hover li a {
  color: none;
  font-weight: 400
}
li:hover li:hover a {
  color: orange;
  font-weight: 700
}
<nav id="main-navigation" class="navigation cf">
  <ul>
    <li><a href="#">Homepage</a>
    </li>
    <li class="">
      <a href="#">About Us</a>
      <ul>
        <li><a href="#">The Company</a>
        </li>
        <li><a href="#">Testimonials</a>
        </li>
        <li><a href="#">Careers</a>
        </li>
        <li><a href="#">Meet The Team</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Services</a>
      <ul>
        <li><a href="#">Broadband</a>
        </li>
        <li>
          <a href="#">Telecoms</a>
          <ul>
            <li><a href="#" class="active-nav">Hosted IP PBX</a>
            </li>
            <li><a href="#">Telephone Numbers</a>
            </li>
            <li><a href="#">Traditional Lines</a>
            </li>
            <li><a href="#">Telephone Systems</a>
            </li>
          </ul>
        </li>
        <li><a href="#">I.T. Support</a>
        </li>
        <li><a href="#">Offsite Backup</a>
        </li>
        <li><a href="#">Web Hosting</a>
        </li>
        <li><a href="#">Hosted Exchange</a>
        </li>
        <li><a href="#">Networking</a>
        </li>
        <li>
          <a href="#">Security</a>
          <ul>
            <li><a href="#">CCTV Systems</a>
            </li>
            <li><a href="#">Access Control</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Login</a>
    </li>
    <li>
      <a href="#">Online Shop</a>
      <ul>
        <li><a href="#">Shopping Cart</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Support</a>
    </li>
    <li><a href="#">Contact Us</a>
    </li>
  </ul>
</nav>
用户回答回答于

将样式添加到li元素中:http://jsfiddle.net/kyvbzssd/3/

.navigation ul li{
    padding: 80px 9px 10px;
}
.navigation ul li a,.navigation ul li{
    font-size: 13px;
    font-weight: 700;
    color: #4d4d4d;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 0;
    text-transform: uppercase;
    border-bottom: 2px solid #fff;
    -webkit-transition: background-color .2s linear, padding-top .2s linear;
    -moz-transition: background-color .2s linear, padding-top .2s linear;
    -o-transition: background-color .2s linear, padding-top .2s linear;
    -ms-transition: background-color .2s linear, padding-top .2s linear;
    transition: background-color .2s linear, padding-top .2s linear;
}
.navigation ul li a:hover,.navigation ul li:hover,.navigation .active-nav {
    background-color: #F36F25; /*#373737;*/
    text-shadow: none;
    color: #f7f7f7!important;
    -webkit-box-shadow: 0 3px 0 #ff8833;
    box-shadow: 0 3px 0 #ff8833;
}

扫码关注云+社区

领取腾讯云代金券