Question

我对网站设计很陌生，自从过去几个小时以来我一直试图解决这个问题，但是找不到任何解决方案。我正在尝试制作一个下拉菜单。这是html代码..

<ul class="mainnav">
        <li><a href="#" class="navText"> <span class="navText"> Home </span> </a></li>
        <li><a href="#" class="navText"><span class="navText"> Games </span></a>
            <ul>
                <li> Battlefield 3</li>
                <li> Call Of Duty </li>
                <li> Assiaisn's creed </li>
            </ul>
         </li>
        <li><a href="#" class="navText"> <span class="navText"> Servers </span> </a></li>
        <li><a href="#" class="navText"> <span class="navText"> Coming Soon </span> </a></li>

</ul>

和css就像......

ul.mainnav{
    background:#f9f9f9;
    font-size:25px;
    margin:0;
    padding:0;
    height:50px;
    display:inline-block;
    min-width:200px;
    list-style:none;
    border-bottom:1px solid #ccc;

}

ul.mainnav > li{
    background:#f9f9f9;
    height:50px;
    float:left;
    margin:0;
    padding:0;
}
ul.mainnav > li a{
    font-family: 'Poiret One', cursive;
    font-size:20px;
    color:#333333;
    text-decoration:none;
    display:inline-block;
    height:50px;
    line-height:50px;
    padding:0;
    position:relative;  
    top:0px;
    margin:0;   
    overflow:hidden
}
ul.mainnav > li a span.navText{
    height:50px;
    padding:0px 15px 0px 15px;
    display:block;
    /*outline:1px dashed blue; */
}
ul.mainnav > li a span.hiddenText{  
    display:block;
    line-height:50px;
    height:50px;
    color: red;
    padding:0;
    margin:0px;
    /* outline:1px dashed green; */
}

ul.mainnav > li  ul{
    width:200px;
    background:#CCCCCC;
    font-family: 'Poiret One', cursive;
    font-size:18px;
    position:absolute;
    margin:0px;
    padding:0px;
}

ul.mainnav > li  ul li{
    height:50px;
    line-height:50px;
    display:block;
    clear:left;
    float:left;
    width: 200px;
    margin:0;
}

和js就像..

$(document).ready(function() { 

$( "span.navText" ).each(function(color) {
        var text = $(this).text()
        $(this).append('<br><span class="hiddenText">'+text+'</span>')
    });


$('ul.mainnav li a').hover(
        function(){
            $(this).stop().children('span.navText').stop().animate({
                marginTop: '-50',
            }, 250)

        },
        function(){
            $(this).stop().children('span.navText').stop().animate({
                marginTop: '0',
            }, 250)
        }

    )
});

现在问题是子菜单定位不正确。你可以在这看到... http://jsfiddle.net/yMUUN/

我想删除主菜单和子菜单之间的那个小差距。

如果你能帮助我解决这个问题，对我来说会很有帮助。提前谢谢！

Answer 1

在以下类中添加行高可以修复差距：

ul.mainnav > li{
    background:#f9f9f9;
    height:50px;
    float:left;
    margin:0;
    padding:0;
        line-height: 10px;
}

jQuery下拉菜单无法正常工作

1 个答案: