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？

回答

相关问题