Question

我制作了一个小菜单并尝试找到一个工作代码来在悬停时显示子菜单。我设法得到的是它在悬停时显示，但是当您将鼠标悬停在子项目上时它不会停留。我试过在鼠标悬停时使用 jQuery，但它不能保持悬停链接。

header .container .links ul li.dropdown {
  position: relative;
}

header .container .links ul li.dropdown ul {
  position: absolute;
  margin: 39px 0 0 0;
  background: #fff;
  padding: 0;
  -webkit-box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.1);
  min-width: 240px;
  z-index: 500;
}

header .container .links ul li.dropdown ul li {
  padding: 17px 20px;
}

header .container .links ul li.dropdown ul li a {
  font-family: Raleway;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 500;
  color: #222;
  text-decoration: none;
}

header .container .links ul li.dropdown ul li:hover a {
  color: #82945c;
  text-decoration: underline;
}

<header>
  <div class="container">
    <div class="links">
      <ul>
        <li><a href="">Link 1</a></li>
        <li class="dropdown">
          <a href="">Link 2</a>
          <ul class="submenu">
            <li><a href="">Link 2A</a></li>
            <li><a href="">Link 2B</a></li>
          </ul>
        </li>
        <li><a href="">Link 3</a></li>
        <ul class="submenu">
          <li><a href="">Link 3A</a></li>
          <li><a href="">Link 3B</a></li>
        </ul>
        <li><a href="">Link 4</a></li>
      </ul>
    </div>
  </div>
</header>

感谢您的帮助！

Answer 1

试试这个基本结构来构建自动关闭的下拉列表：

        .dropdown-menu ul {
            list-style-type: none;
        }

        .dropdown li {
            display: none;
        }

    <div class="dropdown-menu">
        <ul>
            <li><a href="">Link 1</a></li>
            <li>
                <a href="">Link 2</a>
                <ul class="dropdown">
                    <li><a href="">Link 2A</a></li>
                    <li><a href="">Link 2B</a></li>
                </ul>
            </li>
            <li>
                <a href="">Link 3</a>
                <ul class="dropdown">
                    <li><a href="">Link 3A</a></li>
                    <li><a href="">Link 3B</a></li>
                </ul>
            </li>
            <li><a href="">Link 4</a></li>
        </ul>
    </div>`

如果您想保持下拉菜单打开，我建议您使用 jQuery 更改 css：

        $(document).ready(function () {
            $(".dropdown-menu li").mouseover(function () {
                $(this).find('ul').children().css('display', 'block');
            });
        });

Answer 2

您只能使用 HTML 和 CSS 实现上述目标。通过添加如下两个 css 规则，最初隐藏所有子菜单并在悬停时显示：

 
 header .container .links ul li.dropdown {
  position: relative;
}

header .container .links ul li.dropdown ul {
  position: absolute;
  margin: 39px 0 0 0;
  background: #fff;
  padding: 0;
  -webkit-box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.1);
  min-width: 240px;
  z-index: 500;

}
 
header .container .links ul li.dropdown ul li {
  padding: 17px 20px;
}

header .container .links ul li.dropdown ul li a {
  font-family: Raleway;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 500;
  color: #222;
  text-decoration: none;
}

header .container .links ul li.dropdown ul li:hover a {
  color: #82945c;
  text-decoration: underline;
}
.submenu {
  display: none;
}
li.dropdown:hover ul.submenu {
  display: block;
}

<header>
  <div class="container">
    <div class="links">
      <ul>
        <li><a href="">Link 1</a></li>
        <li class="dropdown">
          <a href="">Link 2</a>
          <ul class="submenu">
            <li><a href="">Link 2A</a></li>
            <li><a href="">Link 2B</a></li>
          </ul>
        </li>
        <li><a href="">Link 3</a></li>
        <ul class="submenu">
          <li><a href="">Link 3A</a></li>
          <li><a href="">Link 3B</a></li>
        </ul>
        <li><a href="">Link 4</a></li>
      </ul>
    </div>
  </div>
</header>

如何在悬停时显示子菜单并保持这种状态

2 个答案: