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>项上。

下拉菜单和<li>标签</li>

2 个答案: