Question

我正在尝试构建一个HTML和CSS的下拉菜单，但问题是，当我将鼠标悬停在包含子菜单的菜单项上时，会出现此菜单，但当我尝试将其悬停时，它消失。

这是代码

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100%;
}
header {
  height: 120px;
  background: #353638;
  width: 100%;
  z-index: 1;
}
#c-header {
  width: 60%;
  margin: 0 auto;
  height: 100%;
}
#logo {
  float: left;
  width: 76px;
  height: 35px;
  margin: 40px;
}
#logo img {
  display: block;
  height: 100%;
  width: 100%;
}
nav {
  float: right;
  margin: 15px;
  line-height: 70px;
}
.nav-item {
  list-style-type: none;
  float: left;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  height: 90px;
  display: block;
  position: relative;
  z-index: 1;
}
.nav-item > a {
  text-decoration: none;
  color: white;
  display: block;
  height: 100%;
  line-height: 90px;
  padding: 0 15px 0 15px;
  transition: background .5s ease;
}
.nav-item a:hover {
  background: #337ab7;
}
.nav-item .sub-menu {
  background: #337ab7;
  position: absolute;
  width: 250px;
  display: none;
  z-index: 9999;
}
.sub-menu ul {
  overflow: hidden;
  list-style-type: none;
  padding: 10px;
}
.sub-menu-item {
  height: 40px;
}
.sub-menu-item a {
  text-decoration: none;
  color: white;
  display: block;
  line-height: 32px;
  padding: 4px 0 4px 20px;
  transition: background .3s ease;
}
.sub-menu-item a:hover {
  background: #333;
}
.nav-item a:hover ~ .sub-menu {
  display: block;
  z-index: 9999;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Sima</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/font-awesome/css/font-awesome.css">
  <script src="js/jquery-3.1.0.min.js"></script>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>

<body>

  <header>
    <div id="c-header">
      <a href="#" id="logo">
        <img src="img/logo.png" alt="sima_logo">
      </a>
      <nav id="menu">
        <ul>
          <li class="nav-item">
            <a href="#">Home</a>
          </li>
          <li class="nav-item">
            <a href="#" id="oap">Our Another Page
                <i class="fa fa-angle-down" aria-hidden="true"></i>
              </a>

            <div class="sub-menu">

              <ul id="oap-sub-menu">
                <li class="sub-menu-item"><a href="#">Our Team</a>
                </li>
                <li class="sub-menu-item"><a href="#">Our Testimonial</a>
                </li>
                <li class="sub-menu-item"><a href="#">Our Latest Blog</a>
                </li>
                <li class="sub-menu-item"><a href="#">Our Pricing</a>
                </li>
                <li class="sub-menu-item"><a href="#">Our Happy Client</a>
                </li>
              </ul>

            </div>



          </li>
          <li class="nav-item">
            <a href="#" id="sp">Stick Page
                <i class="fa fa-angle-down"></i>

              </a>

            <div class="sub-menu">

              <ul id="sp-sub-menu">
                <li class="sub-menu-item"><a href="#">Blog Page</a>
                </li>
                <li class="sub-menu-item"><a href="#">Single Blog Page</a>
                </li>
              </ul>

            </div>



          </li>
          <li class="nav-item">
            <a href="#">About</a>
          </li>
          <li class="nav-item">
            <a href="#">Our Skill</a>
          </li>
          <li class="nav-item">
            <a href="#">Our Service</a>
          </li>
          <li class="nav-item">
            <a href="#">Our Portfolio</a>
          </li>
          <li class="nav-item">
            <a href="#">Contact Us</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <script src="js/script.js"></script>
</body>

</html>

＆＃13;

Answer 1

问题在于，将鼠标从.nav-item a移至.sub-menu后，.nav-item a不会悬停，因此此选择.nav-item a:hover ~ .sub-menu无效。

您可以通过以下方式解决此问题：

.nav-item a:hover ~ .sub-menu,  .sub-menu:hover {
    display: block;
    z-index: 9999;
}

这是一个codepen：
http://codepen.io/anon/pen/xEGbYa

这样可确保.sub-menu在您将鼠标悬停时保持阻止。

现在的问题是你遇到了一个新问题 - 一旦你将鼠标从顶部菜单（.nav-item a）移动到子菜单（.sub-menu） - 你的顶级菜单不再正确背景。
要解决此问题，您需要更改html结构（或使用javascript），因为您无法根据当前悬停元素选择前一个元素（~选择器应用于＆＃34;下一个＆＃34;元素）。

Answer 2

我得到了一个没有JavaScript的解决方案。

注意：以下内容适用于 垂直侧边栏菜单， 水平菜单栏会进行一些修改。

看看下面附有我的navbar的图片，没有使用JavaScript：

    Wraper{
    width : 270px;//mandatory
    postion: relative; //mandatory
    height: 100vh; //it will strech menu to full page
    }
    
    inside first ul{
    position: relative;
    z-index: 999;   
    height: 100%;
    }
    
    inside second ul{
    display: none;//mandatory to hide initialy
    float: left;//mandatory
    clear: both;//mandatory
    position: absolute; //first step to solve your issue.
    left: 268; //2nd step - Put left value 2 unit less than width value in wrapper, so after removing mouse you wont face the issue.
    
    }

My navbar

当我尝试将其悬停时，下拉菜单消失

2 个答案: