0

我正在修改现有网页的 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;">

...等等，有许多列表项。我想我应该创建一个单独的跨度，将活动背景颜色赋予列表项，并在每个子页面上，将该跨度放在负责页面父菜单项的列表项周围。

4

2 回答 2

2

你没有显示任何 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

于 2013-08-01T01:06:18.200 回答
1

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

于 2013-08-01T01:10:27.033 回答