горизонтальное подменю должно показывать содержимое вниз

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, и если вы используете фиксированную ширину для элементов списка, она будет работать.