CSS下拉導航引起HTML內容的SO移動

Question

我的第一個問題，希望這是達到標準，應該是一個簡單的解決有人藝術的css樣樣精通......

遇到的問題即時消息是，我的CSS驅動導航的下拉部分導致其下方的內容向右移動。我發現了類似問題的問題，但我已經嘗試了所有提供的解決方案，似乎沒有任何東西能夠正常工作.....

最近我設法得到的是將position:absolute;添加到#nav li:hover ul標記，停止移動內容，但創建一個新問題，下拉菜單僅在鼠標位於頂層菜單項時纔可見，並且嘗試將鼠標移動到子菜單時會導致它消失......另一個問題是我我發現同樣令人沮喪解決......

的HTML導航是標準的嵌套列表：

<div id="navigation_panel" class="orange_grad"> 
    <!-- navigation--> 
     <ul id="nav"> 
      <li><a href="#">about us</a> 
        <ul> 
          <li class="orange_grad"><a href="1">staff</a></li> 
          <li class="orange_grad"><a href="2">venue</a></li> 
          <li class="orange_grad"><a href="2">history</a></li> 
          <li class="orange_grad"><a href="2">community theatre</a></li> 
          <li class="orange_grad"><a href="2">rep theatre</a></li> 
          <li class="orange_grad"><a href="2">theatre school</a></li> 
          <li class="orange_grad"><a href="2">official partners</a></li> 
        </ul> 
      </li> 
      <li><a href="#">join us</a> 
        <ul> 
          <li class="orange_grad"><a href="1">friends membership</a></li> 
          <li class="orange_grad"><a href="2">wine club</a></li> 
        </ul> 
      </li> 
      <li><a href="#">hire</a> 
        <ul> 
          <li class="orange_grad"><a href="1">business</a></li> 
          <li class="orange_grad"><a href="2">rehersal space</a></li> 
          <li class="orange_grad"><a href="2">community groups</a></li> 
          <li class="orange_grad"><a href="2">theatre productions</a></li> 
          <li class="orange_grad"><a href="2">memorable occasions</a></li> 
        </ul> 
      </li> 
      <li><a href="#">contact</a> 
        <ul> 
          <li class="orange_grad"><a href="1">list of contacts</a></li> 
          <li class="orange_grad"><a href="2">contact us now</a></li> 
        </ul> 
      </li> 
      <li class=" last"><a href="#">support</a> 
        <ul> 
          <li class="orange_grad last"><a href="1">donations + requests</a></li> 
          <li class="orange_grad last"><a href="2">past sponsors</a></li> 
          <li class="orange_grad last"><a href="2">thanks</a></li> 
          <li class="orange_grad last"><a href="2">volunteers</a></li> 
          <li class="orange_grad last"><a href="2">set up a community event</a></li> 
        </ul> 
      </li> 
    </ul> 

和相關聯的CSS如下：

#navigation_panel {border-radius: 18px 18px 0 0/ 18px 18px 0 0; width: 900px; height:50px;} 

#nav { margin:0; padding: 0; list-style:none;} 
#nav a{ color:black; font-size: 20px; text-decoration:none; min-height:50px; width:95px;} 
#nav li {text-align:center; float:left; padding:14px 8px ; cursor:pointer; width:95px;} 
#nav li.last{width:99px;} 

#nav li ul {margin-top:14px; margin-left:-8px; padding:0; display: none; list-style:none;} 
#nav li ul li{ border:1px solid black; width:95px; padding:6px 8px;} 
#nav li ul li a{/*font-family:arial;*/ font-size:14px;} 

#nav li:hover{ text-decoration:underline; } 
#nav li:hover ul{display: block;} 
#nav li:hover ul li {clear: left;} 

我試圖找到通過正常途徑解決方案（在谷歌搜索，SO等）藏漢與各種定位構造，但我玩弄剛似乎無法解決這個問題... 感謝您的任何幫助提前，這個問題一直讓我瘋狂的一整天！

Answer 1

更新

終於有機會來重新審視這個。所有你需要的是以下內容添加到#nav li ul：

position: absolute; 
z-index: 100; 

工程在IE8/9，FF和Chrome，但子菜單的定位是關閉的IE7，有或沒有我的變化。爲了解決這個問題，我推薦使用任何您喜歡的方法來使用IE7特定CSS。

Answer 2

您可以嘗試使用z-index做些事情。 Z-index是「製作」圖層，所以也許你可以將你的子導航設置爲z-index：2.

但是，在做下拉菜單的情況下，我推薦使用jQuery。我曾嘗試使用純CSS和HTML製作下拉菜單，但很快發現jQuery是更好的方式。使用jQuery的下拉菜單中

例子：jsfiddle

的jQuery：

$(".subnav").hide(); 
$(".navigation li a, .subnav").hover(function(){ 
    $(this).parent().find(".subnav").stop().fadeIn(400); 
}, function(){ 
    $(this).parent().find(".subnav").stop().fadeOut(400); 
});​ 

HTML：

<div> 
    <ul class="navigation"> 
     <li><a>Example 01</a></li> 
     <li><a>Example 02</a> 
      <ul class="subnav"> 
       <li><a>Lorem</a></li> 
       <li><a>Impsum</a></li> 
       <li><a>Dolor</a></li> 
       <li><a>Sit</a></li> 
       <li><a>Amet</a></li> 
      </ul>  
     </li> 
     <li><a>Example 03</a></li> 
     <li><a>Example 04</a></li> 
    </ul>           
</div>​ 

CSS：

.navigation li{ 
    display: inline; 
    font-family: Arial, sans-serif; 
    font-size: 12px; 
    padding: 0 10px; 
    position: relative; 
} 
.navigation li a:hover{ 
    color: #999; 
} 
.subnav li{ 
    display: list-item; 
    padding: 5px 10px; 
} 
.subnav{ 
    border: 1px solid #000; 
    width: 70px; 
    position: absolute; 
    z-index: 2; 
    margin-left: 10px; 
} 
​