HTML / CSS Jquery悬停未显示

Question

I am new to Jquery and I am trying to make a dropdown on my navigation using simple Jquery hover effect, and I think I am using wrong selector on Jquery. I would like to see the dropdown and be able to navigate when i hover over 'What's New'

Any help would be awesome. Thanks,

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

You should use a nested ul for your dropdown menu. You don't need jQuery at all for this. It can all be done with CSS. Take a look at this simple hover effect under the Products tab.

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

Your submenu is hidden with visibility: hidden style.

I also separated the handled so that the menu doesn't hide while you're hovering it, and added finish() so that we're not queueing animations.

But yeah, like ncox85 said you should do this with 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

If any of you are wondering, I got a good result from just using html/css, got rid of jquery. Maybe I will use jquery another time. fun lesson for myself and those of you out there. Thanks guys

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