html - 下拉菜单和 标签

Question

我正在修改现有网页的 CSS。导航菜单采用列表的形式，其中的元素在正常情况下具有特定的背景颜色，而在事件或悬停时具有另一种颜色。其 CSS 代码如下:

#navigation li a:hover,
#navigation li#active a {
    background: #104E91;
}

一些菜单项(在本例中为列表项)具有带有子页面链接的下拉菜单。我试图使导航菜单项具有“事件”背景颜色，不仅在它们本身处于事件状态时，而且在其子页面之一打开时也是如此。有什么办法可以实现吗？下拉菜单的代码如下所示:

#wsite-menus .wsite-menu li:first-child {
    border-top: 1px solid #000;
}

#wsite-menus .wsite-menu li a {
    padding: 8px;
    color: #fff;
    background: #2f2f2f;
    border: 1px solid #4b4b4b;
    border-top: none;
}

#wsite-menus .wsite-menu li a:hover {
    background: #4b4b4b;
}

我怀疑实现这一点的方法是将上面两个代码块中的第一个修改为如下所示:

#navigation li a:hover,
**#navigation li#active child,**
#navigation li#active a {
    background: #104E91;
}

或类似的东西，但我无法弄清楚确切的语法。有没有一种方法可以让打开的子页面使父页面在导航菜单中看起来处于事件状态？

HTML如下:

<div id = "navigation">
    <ul class = "wsite-menu-default">
        <span id = "Span1" class = "wsite-nav-handle"> style="display:                 inline;">
          <li class="w-menu-item  wsite-nav-0" style="position: relative;">

...等等，还有一些列表项。我想我应该创建一个单独的范围，为列表项赋予事件背景颜色，并且在每个子页面上，将该范围放在负责页面父级菜单项的列表项周围。

Answer 1

您没有显示任何 HTML，所以我自己编写了一些。出于同样的原因，我没有使用您的标签。

HTML:

<nav>
  <a href="#"><li>Home</li></a>
  <a href="#">
    <li>Dropdown
    <div class="dropdown">
      <div class="dropdown-inner">
        <a>Menu</a>
        <a>Number</a>
        <a>3</a>
    </div>
    </li>
  </a>
  <a href="#"><li>About</li></a>
</nav>

CSS:

nav li {
  list-style:none;
  display:inline-block;
  text-align:center;
  background:#222;
  color:#FFF;
  width:100px;
  padding:10px 20px
}

nav a {
  text-decoration: none;
  color:#FFF;
}

nav li div.dropdown {
  display:block;
  position:absolute
}

nav li div.dropdown .dropdown-inner {
  right:20px; /* Equal to li padding Y */
  width:100px; /* Equal to li width */
  padding:10px 20px; /* Equal to li padding X */
  background:#333;
  top:10px;
  position:relative
}

nav li span.dropdown a {
  display:block;
}

代码笔:http://codepen.io/anon/pen/bzIGl