使用css在悬停时展开下拉菜单

Posted 2023-05-08

【中文标题】使用css在悬停时展开下拉菜单

【英文标题】：Expanding drop down menu on hover using css

【发布时间】：2017-10-22 20:10:20

【问题描述】：

我正在尝试为我的导航栏获取一个下拉菜单，以便当我将鼠标悬停在选项卡上时，它会打开一个包含更多选项的下拉菜单。这是我的代码的fiddle。最终的产品应该看起来像this，现在我只想修复悬停部分的下拉菜单。

这是我在 css 中使用的代码 sn-p 来尝试实现这一点：

.dropdown 
    display: none


.navbar-list li:hover .dropdown 
    display: relative;
    color: white;
    text-decoration: none;

【问题讨论】：

你尝试了错误的方法，检查我的答案

@LokeshGupta 我已经尝试过display:block;，它不起作用。

通过小提琴链接检查更新答案。

【参考方案1】：

您尝试了错误的方法，请更改您的 css 部分

.navbar-list li:hover .dropdown 
    display: block;
    color: white;
    text-decoration: none;



<ul class="navbar-list">
    <li class="navbar-tags"><a href="#">OUR DNA</a>
    <ul class="dropdown">
        <li><a href="">Risk</a></li>
</ul>
   </li>

update code

【参考方案2】：

您的 html 结构错误，悬停时需要使用display: block，而不是display: relative

但是回复：HTML，ul 不能是 ul 的直接子代。您需要将下拉菜单嵌套在 li 中。这不仅是正确的标记，而且当您将鼠标悬停在具有嵌套菜单的 li 上时，它允许悬停持续存在。否则，您将需要使用li:hover + .dropdown 来显示下一个.dropdown 菜单，但是一旦您的鼠标离开li，您的:hover 就会停止。

此外，单个嵌套导航元素中的每个ul.dropdown 可能只是单个ul 中的li，但你所拥有的并不正确，所以我没有改变它。

.dropdown 
  display: none


.navbar-tags:hover > .dropdown 
  display: block;
  color: white;
  text-decoration: none;


.navbar-list a 
  color: black;
  text-decoration: none;


.navbar-tags 
  margin: 20px;


.navbar-tags, .dropdown  
  padding: 0;
  list-style-type: none;

<ul class="navbar-list">
  <li class="navbar-tags">
    <a href="#">OUR DNA</a>
    <ul class="dropdown">
      <li><a href="">Risk</a></li>
    </ul>
  </li>
  <li class="navbar-tags"><a href="#">PROGRAMS</a>
    <ul class="dropdown">
      <li><a href="">Adventure Sport</a></li>
    </ul>
    <ul class="dropdown">
      <li><a href="">Entertainment</a></li>
    </ul>
    <ul class="dropdown">
      <li><a href="">Collegiate</a></li>
    </ul>
    <ul class="dropdown">
      <li><a href="">Individual</a></li>
    </ul>
    <ul class="dropdown">
      <li><a href="">Commercial</a></li>
    </ul>
  </li>
  <li class="navbar-tags"><a href="#">RESEARCH</a>
    <ul class="dropdown">
      <li><a href="">Corporate Survey</a></li>
    </ul>
    <ul class="dropdown">
      <li><a href="">Individual Survey</a></li>
    </ul>
  </li>
  <li class="navbar-tags"><a href="#">STORIES</a></li>
</ul>

【讨论】：

投反对票的人能解释一下原因吗？我想知道我是否犯了错误。

感谢您的回答我只有最后一个问题，如何对齐选项卡左侧下拉的选项？

@shortcut 不客气。删除默认填充。更新了我的答案。

谢谢，非常感谢您的帮助。

【参考方案3】：

1 ) 你的 HTML 结构是错误的。

2) 使用display: block 而不是display: relative。

像这样更改您的代码：

.dropdown 
    display: none


.navbar-list li:hover > .dropdown 
    display: block;
    color: white;
    text-decoration: none;


.navbar-list a 
    color: black;
    text-decoration: none;


.navbar-tags 
    padding: 0;
    list-style-type: none;
    margin: 20px;

<ul class="navbar-list">
            <li class="navbar-tags"><a href="#">OUR DNA</a>
            <ul class="dropdown">
                <li><a href="">Risk</a></li>
            </ul>
            </li>
            <li class="navbar-tags"><a href="#">PROGRAMS</a>
            <ul class="dropdown">
                <li><a href="">Professional</a></li>
            </ul>
            <ul class="dropdown">
                <li><a href="">Adventure Sport</a></li>
            </ul>
            <ul class="dropdown">
                <li><a href="">Entertainment</a></li>
            </ul>
            <ul class="dropdown">
                <li><a href="">Collegiate</a></li>
            </ul>
            <ul class="dropdown">
                <li><a href="">Individual</a></li>
            </ul>
            <ul class="dropdown">
                <li><a href="">Commercial</a></li>
            </ul>
            </li>
            <li class="navbar-tags"><a href="#">RESEARCH</a>
            <ul class="dropdown">
                <li><a href="">Corporate Survey</a></li>
            </ul>
            <ul class="dropdown">
                <li><a href="">Individual Survey</a></li>
            </ul>
            </li>
            <li class="navbar-tags"><a href="#">STORIES</a></li>
        </ul>