Question

我正在尝试将下拉菜单应用到我的网站。在导航栏中的＆＃34;关于＆＃34;当我将鼠标悬停在它上面时，我想要一个下拉菜单。会发生什么是我的整个导航栏向下移动一点，下拉菜单几乎没有出现。更具体地说，当我将鼠标悬停在＆＃34;关于＆＃34;导航栏的一部分开始自发地上下移动。任何帮助，将不胜感激。有关详细信息，请参阅下面的代码：

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

我认为这是因为当{strong> 第一个 是你的意思时（我猜）所以我150px margin给ul elements所以我修改了child class并设置了margin to 0。它停止了四处走动。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

#nav{
    float:left;
    margin-top: 50px;

}

.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-left: 12px;
    opacity:1;
}

ul.parent > li {
    float:left;
    width:30%;


}
<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>
 $(function() {
        $('ul.parent > li').hover(function(){
            $(this).find('ul.child').show(200);
        }, function(){
            $(this).find('ul.child').hide(400);
        });
    })

将鼠标悬停在

2 个答案: