Question

我是Jquery的新手，对HTML / CSS还不熟悉，但因为我是通过实践经验学习的类型，所以我在学习新东西时一直在建立一个练习网站，并且一直在尝试我希望最终在真实网站上实现元素。

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

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

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

我附上了JQ，HTML和＆amp; 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中的top:50px更改为padding-top:23px

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用Jquery弹出幻灯片菜单

2 个答案: