Question

我想只使用css，没有javascript。当我将鼠标悬停在顶级菜单上时，我可以显示子菜单，但是只要我取消顶层菜单，子菜单就会消失。如何在不使用javascript的情况下解决这个问题？我错过了什么吗？

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

HTML代码为：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

Answer 2

将<ABC_A1S1>1234</ABC_A1S1> <ABC_uw3ey>1234</ABC_uw3ey> <ABC_PD4frfr5>1234</ABC_PD4frfr5>课程移至has-children，然后选择您的选择：

li

更新了代码段

＆＃13;

.has-children:hover > .sub-menu

＆＃13;

.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;
}

＆＃13;

菜单取消后，Css子菜单仍然不可见javascript

2 个答案: