悬停在下拉列表中时，如何在导航栏上保持悬停效果？

【问题标题】：How do I keep the hover effect on the navbar when hovering through dropdown lists?悬停在下拉列表中时，如何在导航栏上保持悬停效果？
【发布时间】：2016-04-12 01:28:14
【问题描述】：

我的导航栏上有一个悬停效果，我只是添加了一个下拉菜单。当我将鼠标悬停在列表中时，它会失去悬停效果。如何保持悬停效果？我当前的CSS： .navbar-list:hover {color:red;}

HTML：

<li class="dropdown"> <a href="#" class="navbar-list dropdown-toggle" data-toggle="dropdown"> About Us </a> <ul class="dropdown-menu"> <li><a href="company-profile.html">Company Profile</a></li> <li><a href="board-of-director.html">Board of Director</a></li> </ul> </li> 当我在列表中悬停时，如何添加 css 使其具有悬停效果？

【问题讨论】：

发布有关问题的代码以获得帮助。
我只需要 css 使其具有悬停效果，即使在列表中悬停时也是如此。顺便说一句，我添加了 css。
这不仅与您的 css 有关，而且您的 html 结构也很重要。这就是为什么我说code 而你也标记了html，不是吗？
我添加了html，希望你能帮助我:)

标签： html css drop-down-menu html-lists

【解决方案1】：

根据您的代码，您需要像这样更改您的 css 选择器。

/*
.navbar-list:hover {color:red;}
*/
.dropdown:hover {color:red;}

<li class="dropdown">
    <a href="#" class="navbar-list dropdown-toggle" data-toggle="dropdown">
          About Us 
      <!--
          Or you can put your dropdown-menu here
          <ul class="dropdown-menu">
             <li><a href="company-profile.html">Company Profile</a></li>
              <li><a href="board-of-director.html">Board of Director</a></li>
          </ul>
      -->
    </a>
    <ul class="dropdown-menu">
       <li><a href="company-profile.html">Company Profile</a></li>
        <li><a href="board-of-director.html">Board of Director</a></li>
    </ul>
</li>

css选择器.navbar-list:hover {color:red;}表示

<a href="#" class="navbar-list dropdown-toggle" data-toggle="dropdown">About Us </a> 不包含dropdown-menu。

这样您就可以更改您的 css 选择器或 html 结构以满足您的要求。

【讨论】：