Jquery 下拉菜单在悬停时移动

Question

我正在尝试将下拉菜单应用于我的网站。在导航栏中，在“关于”部分，当我将鼠标悬停在它上面时，我希望出现一个下拉菜单。发生的事情是我的整个导航栏向下移动了一点，下拉菜单几乎没有出现。更具体地说，当我将鼠标悬停在导航栏的“关于”部分时，它开始自发地上下移动。任何帮助，将不胜感激。有关详细信息，请参阅下面的代码:

HTML

<div id="header">

    <div id="logo">
        <a href=""><img src="images/logo.png"></a>
    </div>



    <nav id="nav">
            <ul class="parent">
              <li class="links"><a class="active" href="#home">Home</a></li>
              <li class="links"><a href="#news">News</a></li>
              <li class="links"><a href="#contact">Contact</a></li>
              <li class="links"><a href="#about">About</a>
                <ul class="child">
                    <li>Cusine</li>
                    <li>Info</li>
                    <li>Info</li>
                </ul> 
              </li>
            </ul>
    </nav>

CSS

#nav{
    float:right;
    margin-top: 50px;
    margin-right: 150px;
    margin-left: 100px;
    /*position: fixed;*/
}

.links{
    padding: 10px 20px;
    color:pink;
    text-transform: uppercase;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    margin-right: 150px;
}



li a {
    /*font-family: "Times New Roman", Times, serif;*/
    font-family: "Verdana",Sans-serif;
    font-size: 1.1em;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color:#A8004D;
}

li a:hover {
    /*addatransition animation*/
    background-color: pink;
    color:white;
}

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

ul.child{
    display:none;
    width: 100%!important;
}

ul.parent > li {
    float:left;
    width:20%;
    text-align: center;
    padding:10px;
}

js

 $(function() {
        $('ul.parent > li').hover(function(){
            $(this).find('ul.child').show(200);
        }, function(){
            $(this).find('ul.child').hide(400);
        });
    })

Answer 1

我认为这是因为您给两个 ul 元素 150px margin 而只有 第一个 是什么你的意思是(我猜)所以我修改了 child class 并将 margin 设置为 0。它停止四处移动。

 $(function() {
        $('ul.parent > li').hover(function(){
            $(this).find('ul.child').show(200);
        }, function(){
            $(this).find('ul.child').hide(400);
        });
    })

#nav{
    float:right;
    margin-top: 50px;
    margin-right: 150px;
    margin-left: 100px;
    /*position: fixed;*/
}

.links{
    padding: 10px 20px;
    color:pink;
    text-transform: uppercase;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    margin-right: 150px;
}



li a {
    /*font-family: "Times New Roman", Times, serif;*/
    font-family: "Verdana",Sans-serif;
    font-size: 1.1em;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color:#A8004D;
}

li a:hover {
    /*addatransition animation*/
    background-color: pink;
    color:white;
}

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

ul.child{
    display:none;
    width: 100%!important;
    margin-right: 0;
}

ul.parent > li {
    float:left;
    width:20%;
    text-align: center;
    padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
    <div id="logo">
        <a href=""><img src="images/logo.png"></a>
    </div>
    <nav id="nav">
            <ul class="parent">
              <li class="links"><a class="active" href="#home">Home</a></li>
              <li class="links"><a href="#news">News</a></li>
              <li class="links"><a href="#contact">Contact</a></li>
              <li class="links"><a href="#about">About</a>
                <ul class="child">
                    <li>Cusine</li>
                    <li>Info</li>
                    <li>Info</li>
                </ul> 
              </li>
            </ul>
    </nav>
</div>