CSS下拉菜單不適用於position：relative？

Question

我想構建一個簡單的CSS下拉菜單。 如果使用絕對定位，它可以工作，但是如果使用相對定位，則開始壓低內容。 這是什么原因呢？ 不幸的是，對DIV菜單和內容使用絕對定位不是我的選擇。

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;
}

Answer 1

我簡化了代碼，刪除了可怕的浮動元素，並替換為display: inline-block並修復了定位問題。

（ 演示 ）

#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;
}