HTML / CSS Jquery懸停未顯示

Question

我是Jquery的新手，我正在嘗試使用簡單的Jquery懸停效果在我的導航上下拉，我想我在Jquery上使用了錯誤的選擇器。 當我將鼠標懸停在'What's New'上時，我希望看到下拉列表並能夠導航

任何幫助都是極好的。 謝謝，

見附件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完成。 在Products選項卡下查看這個簡單的懸停效果。

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

Answer 2

您的子菜單隱藏了visibility: hidden樣式。

我還將處理的內容分開，以便在您懸停時菜單不會隱藏，並添加了finish（）以便我們不會排隊動畫。

但是，是的，就像ncox85說你應該用css這樣做。

 $(document).ready(function () { $('.nav-level-2').hide(); $("li .nav-level-1").mouseenter( function () { $('.nav-level-2').finish().slideDown('200'); } ); $("li .nav-level-2").mouseleave( function () { $('.nav-level-2').finish().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 { 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 3

只需使用display：none而不是visibility：隱藏在類.nav-level-2上

Answer 4

如果你們有任何想知道，我只是使用html / css得到了一個好結果，擺脫了jquery。 也許我會再次使用jquery。 為我自己和那些在那里的人提供有趣的課程。 多謝你們

 .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 { display: none; 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; } li>a:hover + .nav-level-2{ display: block; } .nav-level-2:hover { display: block; } 

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