使用 Jquery 弹跳幻灯片菜单

Question

我是 Jquery 的新手，对 HTML/CSS 还比较陌生，但是因为我是那种通过实践经验学习的类型，所以我在学习新事物的同时一直在构建一个实践网站，并且一直在尝试包含我希望最终在真正的网站上实施的元素。

我一直在尝试构建一个适当的幻灯片菜单，当光标悬停在菜单项上时会激活该菜单。我已经设法让菜单滑出，但是如果我将光标向下移动到滑出菜单中，整个事情就会开始弹跳！我试过使用 .stop() 但它会闪烁！

我在这里和其他网站上发现了问题非常相似（如果不相同）的人提出的问题，但我认为我不理解任何对他们有用的答案。我需要视觉效果，而“插入 if () {} 语句”之类的答案让我感到困惑，因为我不知道该放在哪里。如果我按照我的源材料指示我做的事情（在底部函数中放置一个检查/if 语句），它似乎只是破坏了代码，然后菜单甚至不会滑出。

这非常令人沮丧，当我太沮丧时（比如六个小时后），我想不出一个解决方案，所以如果有人可以帮助我找到我的代码中的错误或给我一个相当详细的解释我可以做些什么来解决这个弹跳问题，以及它是如何开始的，我真的很感激。

我附上了 JQ、HTML 和 CSS。提前致谢。

$(document).ready(function() {
    $('.dropdown').hover(
    function() {
        $(this).children(".sub-menu").slideDown(200);
    },
    function() {
        $(this).children(".sub-menu").slideUp(200);
    }
);

});

nav {
  background-color: #000000;
  padding:10px 0;
  text-align:center;
}

nav li {
  margin: 10px;
  padding: 0 10px;
  display: inline;
}

nav ul {
  list-style-type:none;
  margin:0;
  padding:0;
}

nav a {
  font-size: 30px;
  height: 35px;
  line-height: 30px;
  color: #ffffff;
  text-decoration: none;
}

nav a:hover,
nav a:focus,
nav a:active {
  color: #ff0000;
}

nav ul li {
  display:inline-block;
  position:relative;
}

nav li ul {
  background-color:#000000;
  position:absolute;
  left:0;
  top:50px;
  width:200px;
}

nav li li a {
  position:relative;
  font-size:25px;
  margin:0;
  padding:0;
  display:block;
}

ul.sub-menu {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
 <ul>
  <li><a href=""><b>Home</b></a></li>
  <li><a href="">About</a></li>
  <li><a href="">Inspiration</a></li>

  <li class="dropdown"><a href="">Find</a>
    <ul class="sub-menu">
      <li><a href="">Ebooks</a></li>
      <li><a href="">PDFs</a></li>
    </ul>
  </li>  

  <li><a href="">News</a></li>

  <li class="dropdown"><a href="">Contact Us</a>
    <ul class="sub-menu">
      <li><a href="">E-mail List</a></li>
      <li><a href="">Contact Us</a></li>
    </ul>
  </li>

  <li class="dropdown"><a href="">Extras</a>
    <ul class="sub-menu">
      <li><a href="">Coming Soon</a></li>
    </ul>
  </li>
 </ul>
</nav>

Answer 1

<li> 元素和下拉菜单 (You can see it here) 之间有一个空格。 只需删除/移动它。

我做到了

nav {
  [...]
  // padding: 10px 0;
  padding: 0;
}
nav li {
  [...]
  // padding: 0 10px;
  padding: 10px;
}

$(document).ready(function() {
    $('.dropdown').hover(
    function() {
        $(this).children(".sub-menu").slideDown(200);
    },
    function() {
        $(this).children(".sub-menu").slideUp(200);
    }
);

});

nav {
  background-color: #000000;
  padding: 0;
  text-align:center;
}

nav li {
  margin: 10px;
  padding: 10px;
  display: inline;
}

nav ul {
  list-style-type:none;
  margin:0;
  padding:0;
}

nav a {
  font-size: 30px;
  height: 35px;
  line-height: 30px;
  color: #ffffff;
  text-decoration: none;
}

nav a:hover,
nav a:focus,
nav a:active {
  color: #ff0000;
}

nav ul li {
  display:inline-block;
  position:relative;
}

nav li ul {
  background-color:#000000;
  position:absolute;
  left:0;
  top:50px;
  width:200px;
}

nav li li a {
  position:relative;
  font-size:25px;
  margin:0;
  padding:0;
  display:block;
}

ul.sub-menu {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
 <ul>
  <li><a href=""><b>Home</b></a></li>
  <li><a href="">About</a></li>
  <li><a href="">Inspiration</a></li>

  <li class="dropdown"><a href="">Find</a>
    <ul class="sub-menu">
      <li><a href="">Ebooks</a></li>
      <li><a href="">PDFs</a></li>
    </ul>
  </li>  

  <li><a href="">News</a></li>

  <li class="dropdown"><a href="">Contact Us</a>
    <ul class="sub-menu">
      <li><a href="">E-mail List</a></li>
      <li><a href="">Contact Us</a></li>
    </ul>
  </li>

  <li class="dropdown"><a href="">Extras</a>
    <ul class="sub-menu">
      <li><a href="">Coming Soon</a></li>
    </ul>
  </li>
 </ul>
</nav>

Answer 2

将 nav li ul 中的 css 更改为 top:50px 到 padding-top:23px

$(document).ready(function() {
    $('.dropdown').hover(
    function() {
        $(this).children(".sub-menu").slideDown(200);
    },
    function() {
        $(this).children(".sub-menu").slideUp(200);
    }
);

});

nav {
  background-color: #000000;
  padding:10px 0;
  text-align:center;
}

nav li {
  margin: 10px;
  padding: 0 10px;
  display: inline;
}

nav ul {
  list-style-type:none;
  margin:0;
  padding:0;
}

nav a {
  font-size: 30px;
  height: 35px;
  line-height: 30px;
  color: #ffffff;
  text-decoration: none;
}

nav a:hover,
nav a:focus,
nav a:active {
  color: #ff0000;
}

nav ul li {
  display:inline-block;
  position:relative;
}

nav li ul {
  background-color:#000000;
  position:absolute;
  left:0;
  padding-top:23px;
  width:200px;
}

nav li li a {
  position:relative;
  font-size:25px;
  margin:0;
  padding:0`;
  display:block;
}

ul.sub-menu {
    display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
 <ul>
  <li><a href=""><b>Home</b></a></li>
  <li><a href="">About</a></li>
  <li><a href="">Inspiration</a></li>

  <li class="dropdown"><a href="">Find</a>
    <ul class="sub-menu">
      <li><a href="">Ebooks</a></li>
      <li><a href="">PDFs</a></li>
    </ul>
  </li>  

  <li><a href="">News</a></li>

  <li class="dropdown"><a href="">Contact Us</a>
    <ul class="sub-menu">
      <li><a href="">E-mail List</a></li>
      <li><a href="">Contact Us</a></li>
    </ul>
  </li>

  <li class="dropdown"><a href="">Extras</a>
    <ul class="sub-menu">
      <li><a href="">Coming Soon</a></li>
    </ul>
  </li>
 </ul>
</nav>