Question

这证明非常困难。导航粘贴在下面。这是一个wordpress网站，所以虽然我可以改变html的结构而不是。

看起来嵌套的下拉菜单<ul>包含在父<li>元素中。

我的目标是，在悬停时，列表项为橙色，不透明度为0.4。我也希望这下拉菜单行项目。除此之外，问题是，当将鼠标悬停在嵌套在其中的下拉列表项时，0.4不透明度似乎适用于整个菜单，而不仅仅是悬停的菜单。我尝试过很多东西。这是我尝试过的尝试：

.dropdown > ul li:hover {  // the styling in question. Everything below is an attempt to limit this from affecting the whole drop down menus.
    background-color: orange;
    opacity:0.4; 
}

.dropdown > ul.children li:hover, .dropdown > ul.children:hover { // trying to select just the drop down menu and take of the opacity by setting it to 1
  opacity: 1;
}

ul.children li:hover { // similar to above just another attempt
  opacity: 1;
}

ul.children, ul.children:hover, ul.children li, ul.children li:hover{ // just resorting to trying everything now
  opacity: 1;
}

我也做了一个小提琴：http://jsfiddle.net/m7owomb0/ 看看当你将鼠标悬停在具有下拉菜单项的菜单项上时，它是透明的吗？然后单击其中一个实际链接，并将实时站点的样式加载到框架中。当你在那里盘旋时，它不透明，你可以清楚地看到这些物品。我只是希望它们在盘旋时变成橙色。

    <div id="main-navigation">
  <nav>
    <div class="dropdown dropdown-horizontal">
      <ul class="main-nav">
        <li class="current_page_item">
          <a href="http://dduck8977.webfactional.com/">
            Home
          </a>
        </li>
        <li class="page_item page-item-57">
          <a href="http://dduck8977.webfactional.com/?page_id=57">
            Clear Outs &#038; Offers
          </a>
        </li>
        <li class="page_item page-item-8 page_item_has_children">
          <a href="http://dduck8977.webfactional.com/?page_id=8">
            Flooring
          </a>
          <ul class='children'>
            <li class="page_item page-item-19">
              <a href="http://dduck8977.webfactional.com/?page_id=19">
                Chestnut
              </a>
            </li>
            <li class="page_item page-item-15">
              <a href="http://dduck8977.webfactional.com/?page_id=15">
                Douglas Fir
              </a>
            </li>
            <li class="page_item page-item-12">
              <a href="http://dduck8977.webfactional.com/?page_id=12">
                Heart Pine
              </a>
            </li>
            <li class="page_item page-item-17">
              <a href="http://dduck8977.webfactional.com/?page_id=17">
                Maple
              </a>
            </li>
            <li class="page_item page-item-10">
              <a href="http://dduck8977.webfactional.com/?page_id=10">
                Oak
              </a>
            </li>
          </ul>
        </li>
        <li class="page_item page-item-50 page_item_has_children">
          <a href="http://dduck8977.webfactional.com/?page_id=50">
            Locations
          </a>
          <ul class='children'>
            <li class="page_item page-item-52">
              <a href="http://dduck8977.webfactional.com/?page_id=52">
                New York
              </a>
            </li>
            <li class="page_item page-item-55">
              <a href="http://dduck8977.webfactional.com/?page_id=55">
                Philadelphia
              </a>
            </li>
          </ul>
        </li>
        <li class="page_item page-item-21 page_item_has_children">
          <a href="http://dduck8977.webfactional.com/?page_id=21">
            Paneling
          </a>
          <ul class='children'>
            <li class="page_item page-item-31">
              <a href="http://dduck8977.webfactional.com/?page_id=31">
                Barn Wood
              </a>
            </li>
            <li class="page_item page-item-27">
              <a href="http://dduck8977.webfactional.com/?page_id=27">
                Eastern Mix
              </a>
            </li>
            <li class="page_item page-item-29">
              <a href="http://dduck8977.webfactional.com/?page_id=29">
                Mushroom Wood
              </a>
            </li>
            <li class="page_item page-item-23">
              <a href="http://dduck8977.webfactional.com/?page_id=23">
                Oak
              </a>
            </li>
            <li class="page_item page-item-25">
              <a href="http://dduck8977.webfactional.com/?page_id=25">
                Pine &#038; Fir
              </a>
            </li>
          </ul>
        </li>
        <li class="page_item page-item-40">
          <a href="http://dduck8977.webfactional.com/?page_id=40">
            Patchwork
          </a>
        </li>
        <li class="page_item page-item-37 page_item_has_children">
          <a href="http://dduck8977.webfactional.com/?page_id=37">
            Reclaimed Wood
          </a>
          <ul class='children'>
            <li class="page_item page-item-47">
              <a href="http://dduck8977.webfactional.com/?page_id=47">
                Lumber Phrases
              </a>
            </li>
            <li class="page_item page-item-42">
              <a href="http://dduck8977.webfactional.com/?page_id=42">
                Wood Types
              </a>
            </li>
          </ul>
        </li>
        <li class="page_item page-item-35">
          <a href="http://dduck8977.webfactional.com/?page_id=35">
            Shelving
          </a>
        </li>
        <li class="page_item page-item-33">
          <a href="http://dduck8977.webfactional.com/?page_id=33">
            Tables
          </a>
        </li>
      </ul>
    </div>
  </nav>
</div>

如何添加样式以使悬停的订单项为橙色且不透明度为0.4，而不会影响这些订单项中的嵌套UL？

Answer 1

您无法覆盖子元素中的不透明度，请改用rgba。

.dropdown > ul li:hover {
    background-color: rgba(255,165,0,0.4);
}

样式嵌套ul与父项分开下拉

1 个答案: