水平子菜單應將內容向下滑動

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，如果你使用固定寬度的列表項目，它將起作用。