下拉菜单和 <li> 标签

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。 我没有出于相同原因使用您的标签。

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;
}

Codepen： http ：//codepen.io/anon/pen/bzIGl

Answer 2

您遇到的问题是因为您正在将背景色分配给<a>标签而不是<li>标签。 当退出父<li>项并向下移动到子<li>元素时，从技术上讲，您已经离开了<a> ，因此背景颜色可以正确还原。 但是，如果将背景色应用于<li>标记，则在任何子级列表项上滚动都会使父级<li>项保持活动状态。