javascript - HTML/CSS Jquery 悬停不显示

Question

我是 Jquery 新手， 我正在尝试使用简单的 Jquery 悬停效果在导航上创建下拉菜单，并且我认为我在 Jquery 上使用了错误的选择器。 我希望看到下拉菜单，并能够在将鼠标悬停在“新增功能”上时进行导航

任何帮助都会很棒。谢谢，

See ATTACHED IMG

$(document).ready(function () {
    $("li .nav-level-1").hover(
  function () {
     $('.nav-level-2').slideDown('200');
  }, 
  function () {
     $('.nav-level-2').slideUp('200');
  }
);
  });

.main-nav {
    background: #000;
    height: 30px;
    position: relative;
    overflow: visible;
    z-index: 2;
    width: 100%;
    left: 0;
    cursor: default;
}

.main-nav .inner{
    height: 100%;
}

.main-nav>.inner{
    text-align: justify;
}

.nav-links-container {
    position: static;
    /* background: red; */
    height: 100%;
    
}

.nav-links{
    padding: 0 0 0 3px;
    display: inline;
    margin-bottom: 20px;
    overflow: hidden;
     /*background-color: green; */
}

li {
    vertical-align: top;
    padding: 5px;
    display: inline-block;
    /* background: blue; */
}

li>a {
    color: #FFF;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 9px 9px;
    margin: 0 -3px;
}
li>a:hover {
    background-color: white;
    color:#000;    
}

.nav-level-2 {
    visibility: hidden;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: auto;
    border-bottom: 5px solid #000;
    background: red;
    text-align: left;

}

.nav-level-2-container {
    padding-top: 40px;
    padding-bottom: 40px;
    -ms-flex: 0px 1px auto;
    -webkit-box-flex: 0;
    -webkit-flex: 0px 1px auto;
    flex: 0px 1px auto;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<nav class="main-nav">
  <div class="inner max-girdle-width">
    <div class="nav-links-container">
      <ul class="nav-links">
        <li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
          <div class="nav-level-2">
            <div class="nav-level-2-container row max-girdle-width">
              <div><a href="#">Submenu</a> </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

您应该为下拉菜单使用嵌套的 ul。为此，您根本不需要 jQuery。这一切都可以用 CSS 来完成。看看“产品”选项卡下这个简单的悬停效果。

Codepen

HTML

 <header class="navbar">
  <div class="container">
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li>
        <a href="#">Products</a>
        <ul>
          <li><a href="#">Cars</a>
            <ul>
              <li><a href="#">Ford</a></li>
              <li><a href="#">Chevy</a></li>
              <li><a href="#">Toyota</a></li>
            </ul>
          </li>
          <li><a href="#">Trucks</a></li>
          <li><a href="#">Vans</a></li>
          <li><a href="#">SUVs</a></li>
        </ul>
      </li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</header>

CSS

header {
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
  background-color: #2EBAE8;
}

.container {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

ul {
  float: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul ul {
  width: 200px;
  background-color: #046382;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  float: none;
}
ul ul ul {
  top: 0;
  left: 100%;
}
ul ul li {
  float: none;
}
ul li {
  float: left;
  padding: 0 10px;
  position: relative;
}
ul li:hover > ul {
  display: block;
}
ul a {
  display: block;
  text-decoration: none;
  color: white;
  line-height: 50px;
  transition: color 0.5s;
}
ul a:hover {
  color: #E82E82;
}