0

我正在研究你可以在这里看到的下拉菜单。ul#navigation我在和上都有圆角ul.subnavigation。当子菜单向下滑动时，可以看到底部的边框ul.subnavigation与 的内容重叠ul#navigation，当我希望它顺利向下滑动时，没有“闪烁”。我知道这个问题是由圆角引起的。我需要在菜单下拉时ul.subnavigation覆盖底部的圆角，而不会看到双边框底部问题。ul#navigation我希望这很清楚！代码如下。

谢谢，

缺口

HTML

<ul id="navigation">
    <li class="dropdown"><a href="#">menu</a>
        <ul class="sub_navigation">
            <li><a href="#">home</a></li>
            <li><a href="#">help</a></li>
            <li><a href="#">disable tips</a></li>
        </ul>
    </li>
</ul>

查询

$('.dropdown').hover(function() {
    $(this).find('.sub_navigation').slideToggle();
});​

CSS

ul#navigation, ul.sub_navigation {
    margin:0;
    padding:0;
    list-style-type:none;
    min-width:100px;
    background-color: white;
    font-size:15px;
    font-family: Trebuchet MS;
    text-align: center;
    -khtml-border-radius: 0 0 5px 5px;    
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    border:1px black solid;
    border-top:none;
}

ul.sub_navigation {
    margin-left:-1px;
    position: absolute;
    top:28px;
}

ul#navigation {
    float:left;
    position:absolute;
    top:0;
}

ul#navigation li {
    float:left;
    min-width:100px;
}

ul.sub_navigation {
    position:absolute;
    display:none;
}

ul.sub_navigation li {
    clear:both;
}

 a,
 a:active,
 a:visited {
    display:block;
    padding:7px;
}
4

1 回答 1

1

为什么要放置子菜单？删除其上的定位并隐藏它直到悬停触发。

检查这个小提琴。

于 2012-06-11T10:36:39.830 回答