水平子菜单应该向下滑动内容

Question

我的水平菜单有一些问题。主要内容应避免子菜单。因此，当子菜单打开时，它应该将主要内容向下推。

html

<ul id="menu">
<li class="active"><a href="#">Menu1</a></li>
<li class="active"><a href="#">Menu2</a>
<ul>
<li class="active"><a href="#">Sub 1</a></li>
<li class="active"><a href="#">Sub 2</a></li>
<li class="active"><a href="#">Sub 3</a></li>
<li class="active"><a href="#">Sub 4</a></li>
</ul>
</li>

和css

#menu{
    width: 100%;
    margin-left:auto;
    margin-right:auto;
    padding: 15px 0 0 0;
    list-style: none;  
    background: #111;
    background: -moz-linear-gradient(#444, #111); 
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));  
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
    min-width: 1100px;
    position: relative;
    clear: both;
    text-align:center;

}

#menu li{
    display: inline-block;
    padding: 0 0 10px 0;
}

#menu a{
    float: left;
    padding: 0px 50px 0 0;
    color: #999;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
    height: 30px;
    }

#menu li:hover > a{
    color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
    color: #fafafa;
}

#menu li:hover > ul {
    display: block;
}

/* Sub-menu */

#menu ul{
    width: 100%;
    margin: 0px 0 0 0;
    padding: 15px 0 0 0;
    list-style: none;  
    display: none;
    position: absolute;
    top: 55px;
    left: 0px;
    background: #111;
    background: -moz-linear-gradient(#444, #111); 
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));  
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
    min-width: 1100px;
}

}

#menu ul li{
    float: left;
    padding: 0 0 10px 0;
    position: relative;
}

#menu ul a{    
    float: left;
    height: 30px;
    padding: 0px 25px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#menu ul a:hover{
        background: #0186ba;
    background: -moz-linear-gradient(#04acec,  #0186ba);    
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background: -webkit-linear-gradient(#04acec,  #0186ba);
    background: -o-linear-gradient(#04acec,  #0186ba);
    background: -ms-linear-gradient(#04acec,  #0186ba);
    background: linear-gradient(#04acec,  #0186ba);
}
/* Clear floated elements */
#menu:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

我尝试将#menu ul 位置更改为相对位置。但这会破坏整个风格。 有喜欢帮我的人吗？ =)

JSFIDDLE：http://jsfiddle.net/M8S3T/

Answer 1

绝对或固定定位的元素会从页面的正常流程中移除。如果你想保持流量，你必须避免position:absolute。

我试着做一个简单的例子来展示：http://jsfiddle.net/M8S3T/1/

#menu li{
    float:left;
    padding: 0 0 10px 0; 
    width:5em;
}


/* Sub-menu */

#menu ul{
    width: 100%;
    margin: 40px -80px 0;
    padding: 15px 0 0 0;
    list-style: none;  
    display: none;
    background: #111;
    background: -moz-linear-gradient(#444, #111); 
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));  
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
    min-width: 1100px;
}

#menu li ul li {
    float:left;
    padding: 0 0 10px 0;
    width: 10em;
}

#menu ul a{    
    float: none;
    height: 30px;
    padding: 0px 25px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

我只向您发布我更改的部分。有了它，您可以使用float，如果您对列表项使用固定宽度，它将起作用。