CSS下拉菜單不能使用position：relative？

我想構建一個簡單的CSS下拉菜單。如果我使用絕對定位，它會起作用，但如果我使用相對定位，則會開始壓下內容。這是什麼原因？不幸的是，對DIV菜單和內容使用絕對定位不是一種選擇。CSS下拉菜單不能使用position：relative？

HTML：

<div id="menu"> 
    <ul> 
     <li class="topmenu"> 
     <a href="">Top 1</a> 
     <ul> 
      <li class="submenu"><a href="">Sub 1</a></li> 
      <li class="submenu"><a href="">Sub 2</a></li> 
     </ul> 
     </li> 
    </ul> 
</div> 
<div id="content"> 
Test 
</div>

CSS：

#menu { 
    position:relative; 
} 

#menu ul { 
    list-style-type:none; 
    list-style-image:none; 
    margin:0px; 
    padding:0px; 
} 

#menu li.topmenu { 
    float:left; 
} 

.topmenu a { 
    float:left; 
    width:110px; 
} 

.topmenu ul{ 
    display:none; 
} 

.submenu a{ 
    width:110px; 
    clear:both; 
} 

.topmenu:hover ul { 
    display:block; 
    z-index:10; 
} 
#content { 
    display: block; 
    clear: both; 
    z-index: 1; 
}

來源

2015-05-24 Axel

你應該對之間的絕對和相對定位的差異讀了，並且他們在DOM是如何工作的。 –

爲什麼'position：absolute'不是一個選項？這是創建下拉菜單的標準方法。 –

當在上面的例子中使用絕對定位時，我需要給內容div一個頂級屬性，對吧？但是我不知道菜單的實際高度。 – Axel

我已經簡化的代碼，除去可怕的浮紗和與display: inline-block取代的和固定的定位問題。

（Demo）

#menu ul { 
    list-style:none; 
    margin:0px; 
    padding:0px; 
    font-size: 0px; 
} 
#menu li { 
    font-size: 1rem; 
} 
#menu > ul > li { 
    display: inline-block; 
} 
#menu ul ul { 
    display: none; 
} 
#menu ul li:hover ul { 
    display: block; 
    position: absolute; 
} 
#menu a { 
    display: inline-block; 
    width:110px; 
}

來源

2015-05-24 23:20:54

CSS下拉菜單不能使用position：relative？

回答

相關問題