Css 菜单悬停后子菜单不可见否 javascript

Question

我只想使用 css，不想使用 javascript。当我将鼠标悬停在顶级菜单上时，我可以显示子菜单，但是一旦我将鼠标悬停在顶级菜单上，子菜单就会消失。如果不使用 javascript 怎么解决这个问题？我错过了什么吗？

当我将鼠标悬停在顶级菜单上时，我尝试使用 .has-children:hover + .sub-menu {display: block;} 来显示子菜单，但我不知道我可以编写什么代码来保持子菜单可见。

HTML代码是：

.header ul {
  list-style: none;
  padding: 20px 30px;
}
.header li {
  float: left;
  position: relative;
}
.header li a {
  padding: 20px 30px;
}
.menu {
  clear: none;
  float: right;
  max-height: none;
}
.menu li ul {
  position: absolute;
}
.sub-menu {
  display: none;
}
.open-menu-link {
  display: none;
}
.has-children:hover + .sub-menu {
  display: block;
}

<header class="header">
  <ul class="menu">
    <li><a href="#work">Work</a></li>
    <li>
      <a class="has-children" href="#about">Haschildren</a>
      <ul class="sub-menu">
        <li><a href="#link1">Child 1</a></li>
        <li><a href="#link2">Child 2</a></li>
        <li><a href="#link3">Child 3</a></li>
      </ul>
    </li>
    <li><a href="#careers">Careers</a></li>
    <li>
      <a class="has-children" href="#careers">About</a>
      <ul class="sub-menu">
        <li><a href="#link1">Child 3</a></li>
        <li><a href="#link2">Child 4</a></li>
      </ul>
    </li>
    <li><a href="#">end</a></li>
  </ul>
</header>

Answer 1

将您 has-children class 移到 li 上，然后让您的选择器：

.has-children:hover > .sub-menu

更新的代码段：

.header ul {
  list-style: none;
  padding: 20px 30px;
}
.header li {
  float: left;
  position: relative;
}
.header li a {
  padding: 20px 30px;
}
.menu {
  clear: none;
  float: right;
  max-height: none;
}
.menu li ul {
  position: absolute;
}
.sub-menu {
  display: none;
}
.open-menu-link {
  display: none;
}
.has-children:hover > .sub-menu {
  display: block;
}

  <header class="header">
    <ul class="menu">
      <li><a href="#work">Work</a></li>
      <li class="has-children">
        <a href="#about">Haschildren</a>
        <ul class="sub-menu">
          <li><a href="#link1">Child 1</a></li>
          <li><a href="#link2">Child 2</a></li>
          <li><a href="#link3">Child 3</a></li>
        </ul>
      </li>
      <li><a href="#careers">Careers</a></li>
      <li class="has-children">
        <a href="#careers">About</a>
        <ul class="sub-menu">
          <li><a href="#link1">Child 3</a></li>
          <li><a href="#link2">Child 4</a></li>
        </ul>
      </li>
      <li><a href="#">end</a></li>
    </ul>
  </header>

Answer 2

将class has-children 添加到li 并使用li 的悬停事件显示子菜单。

.header ul {
  list-style: none;
  padding: 20px 30px;
}
.header li {
  float: left;
  position: relative;
}
.header li a {
  padding: 20px 30px;
}
.menu {
  clear: none;
  float: right;
  max-height: none;
}
.menu li ul {
  position: absolute;
}
.sub-menu {
  display: none;
}
.open-menu-link {
  display: none;
}
.has-children:hover .sub-menu {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<body>
  <header class="header">
    <ul class="menu">
      <li><a href="#work">Work</a>
      </li>
      <li class="has-children"><a href="#about">Haschildren</a>
        <ul class="sub-menu">
          <li><a href="#link1">Child 1</a>
          </li>
          <li><a href="#link2">Child 2</a>
          </li>
          <li><a href="#link3">Child 3</a>
          </li>
        </ul>
      </li>
      <li><a href="#careers">Careers</a>
      </li>
      <li class="has-children"><a href="#careers">About</a>
        <ul class="sub-menu">
          <li><a href="#link1">Child 3</a>
          </li>
          <li><a href="#link2">Child 4</a>
          </li>
        </ul>
      </li>
      <li><a href="#">end</a>
      </li>
    </ul>
  </header>

</body>

</html>

Css 菜单悬停后子菜单不可见否 javascript

Css submenu not remain visible after menu unhover no javascript

css

menu

submenu

Css 菜单悬停后子菜单不可见 否 javascript

Css submenu not remain visible after menu unhover no javascript

css

menu

submenu

Css 菜单悬停后子菜单不可见否 javascript