Question

我知道许多其他人已经面临这些问题，并且有可用的解决方案。但是我发现的任何问题与我都不相似，所有人都错过了position:relative为父母。但是我使用了position: relative和overflow:hidden作为父级，position: absolute用于子级，但是父级隐藏的溢出隐藏了菜单中的子菜单。

JSFIDDLE HERE

HTML

<head>
<link rel='stylesheet' href="menu.css">

</head>
<body>
<div id="menu-container">
    <ul id='menu'>
    <li><a href="#">Home</a></li>
    <li><a href="#" class='drop'>S</a>
        <ul>
            <li><a href='#'>M</a></li>
            <li><a href='#'>P</a></li>
            <li><a href='#'>C</a></li>
            <li><a href='#'>B</a></li>
        </ul>
    </li>
    <li><a href="#" class='drop'>L</a>
        <ul>
            <li><a href='#'>1</a></li>
            <li><a href='#'>2</a></li>
            <li><a href='#'>3</a></li>
            <li><a href='#'>4</a></li>
        </ul>
    </li>
    </ul>
</div>
</body>

menu.css

#menu-container{
    margin: 60px;
    margin-bottom: -20px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /* Background color and gradients */
    background-color: white;/*
    background-color: -moz-linear-gradient(top, #0272a7, #013953);
    background-color: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
    /* Borders */
    border: 1px solid #002232;
    -moz-box-shadow:inset 0px 0px 1px #edf9ff;
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
    box-shadow:inset 0px 0px 1px #edf9ff;
    padding: 0;
    z-index:20;
    position: relative;
    overflow: hidden;
}

#menu{
    list-style:none;
    vertical-align: middle;
    /* Rounded Corners */
    color: #2a6496;
    position: relative;
    margin: 0;
    padding:0;
    margin-left: 30px;
}

#menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    overflow: hidden;
    margin-right:30px;
    border:none;
    padding: 10px 15px 10px 15px;
}

#menu li:hover {
    /* Background color and gradients */
    /*
    background: linear-gradient(top, #F4F4F4, #e1e1e1);
    background: -moz-linear-gradient(top, #F4F4F4, #e1e1e1);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#e1e1e1));
    */
    background: #428bca;
    /* Rounded corners */

    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;

}

#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px; 
    color: #2a6496;
    display:block;
    outline:0;
    text-decoration:none;
}

#menu li:hover > a {
    color: white;
}
#menu li .drop {
    padding-right:21px;
    background:url("../../images/drop.png") no-repeat right 6px;
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}

#menu li ul{
    margin:4px auto;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
    /*padding:10px 5px 10px 5px;*/
    padding: 0;
    border:1px solid #428bca;
    border-top:none;
    z-index: 999;
    width: 200px;
    /* Gradient background */
    background:white;
    /*background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

    overflow-x: hidden;
    */
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
}

#menu li ul li{
    padding: 10px 10px 10px 10px;
    position: relative;
    z-index: 999;
    width: 100%;
    text-align: left;
}
#menu li ul li:hover{
    background: #13967e;
}
#menu li ul a{
    color: #2a6496;
}

#menu li ul li:hover a{
    color: white;
}
#menu li .input, #menu li .input:hover{
    background: white;
}

#menu li:hover ul {
    left: -1px;
    top:auto;
}

删除菜单容器中隐藏的溢出显示子菜单，但菜单容器不包含菜单。

有人可以帮我找到我做错了什么，这样子菜单也会显示出来。提前感谢您的时间和精力。

Answer 1

尝试从li和＃menu-container中删除overflow：hidden。添加到＃menu-container此代码

#menu-container:after{
    content:'';
    display:block;
    clear:both;
}

http://jsfiddle.net/Ltfx7/

溢出隐藏和位置绝对菜单

1 个答案: