Question

我正在尝试实现jquery的toggle方法来制作一个下拉菜单，它实际上工作正常，唯一的问题是下拉菜单推送其父容器，它似乎为它增加了一些高度，它有点难我这样说，但让我展示一些我的HTML和CSS

HTML：

<div id="header_container">
    <h1>This is Header</h1>
    <div id="personal_menu">
        <ul>
            <li>
            Welcome back user!
            </li>
            <li class="main_link">
                <a href="#">My links</a>
                <ul class="sublink" style="display: block;">
                    <li><a href="#">link 1</a></li>
                    <li><a href="#">link 2</a></li>
                    <li><a href="#">link 3</a></li>
                    <li><a href="#">link 4</a></li>
                </ul>
            </li>
            <li>
            <a href="#">Logout</a>    </li>
        </ul>
    </div>
</div>

CSS

#header_container{
    width:960px;
    overflow:auto;
    padding: 10px 15px;
    margin: 0 auto;
}
#header_container{
    background:#BED308;
    height:218px;
    -moz-border-radius: 0 0  40px 40px;
    border-radius: 0 0  40px 40px;
}
#personal_menu{
    overflow: auto;
    position: relative;
    right: 0;
    top: 135px;
    width: 100%;            
}
        #personal_menu ul, #main_menu ul{ list-style-type:none;}
        #personal_menu ul{
            float: right;
            margin-top: 5px;
        }
            #personal_menu li{
                float: left;
                text-align: center;
            }
            #personal_menu li{
                margin: 0;
                padding: 3px 5px;
            }
                #personal_menu li a{
                    color: #fff;
                    text-decoration:none;
                }
                #personal_menu li a:hover{
                    text-decoration:underline;
                }
                #personal_menu ul li ul {
                    display: none;
                    position: absolute;
                    width: 160px;
                    border: 1px solid #ccc;
                    padding: 10px 0;
                    z-index: 1000;
                }

和jquery：

$(function() {  
    $(".main_link").click(function(){
        $(".sublink").toggle();
    });
});

所以当我点击main_link类时，切换的子链接保留在标题容器内，使我的标题可滚动，我试图将一些z-index规则放到我的子链接，因为我认为它需要在其他所有内容之上但仍然没有运气，请帮助。

由于

Answer 1

尝试删除overflow：auto。如果你有不受欢迎的滚动，问题必须在这里。

Answer 2

您使用的是哪种浏览器？

请注意IE7.0有一个z-index错误导致类似你的情况，更多信息：IE7 Z-Index Layering Issues

jquery切换下拉菜单问题（css）

2 个答案: