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

Question

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

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>