CSS下拉菜單：子項目的位置

Question

我嘗試使用CSS為Wordpress模板創建一個下拉菜單。 當我懸停一個菜單項時（例如，您可以在圖片上看到“ Cupcake Ipsum”），整個菜單以一種奇怪的方式顯示。

我希望這幅圖是不言自明的。 菜單項“ Cupcake Ipsum”懸停在菜單的底部視圖：

我的HTML代碼（來自Firebug）是：

<div id="menu" role="navigation">
<div class="menu">
<ul>
<li class="current_page_item">
<a title="Home" href="http://whatever.com/wordpress/">Home</a>
</li>
<li class="page_item page-item-40">
<a href="http://whatever.com/wordpress/?page_id=40">Cupcake Ipsum</a>
<ul class="children">
<li class="page_item page-item-388">
<a href="http://whatever.com/wordpress/?page_id=388">Red Velvet Cupcake</a>
</li>
<li class="page_item page-item-390">
<a href="http://whatever.com/wordpress/?page_id=390">Mango Cupcake</a>
</li>
<li class="page_item page-item-392">
<a href="http://whatever.com/wordpress/?page_id=392">Chocolate Cupcake</a>
</li>
</ul>
</li>
<li class="page_item page-item-43">
<a href="http://whatever.com/wordpress/?page_id=43">Bacon Ipsum</a>
<ul class="children">
<li class="page_item page-item-405">
</ul>
</li>
<li class="page_item page-item-45">
<a href="http://whatever.com/wordpress/?page_id=45">Veggie Ipsum</a>
<ul class="children">
<li class="page_item page-item-397">
<a href="http://whatever.com/wordpress/?page_id=397">Tomato</a>
</li>
<li class="page_item page-item-399">
<a href="http://whatever.com/wordpress/?page_id=399">Lettuce</a>
</li>
<li class="page_item page-item-401">
<a href="http://whatever.com/wordpress/?page_id=401">Broccoli</a>
</li>
<li class="page_item page-item-403">
<a href="http://whatever.com/wordpress/?page_id=403">Onion</a>
</li>
</ul>
</li>
</ul>
</div>
</div>

我的CSS代碼是：

#menu ul li a {
text-decoration: none;
color: #CCCCCC;
font-size: 16px;
padding: 10px;
display: block;
position:relative;
}

#menu ul li a:hover {
background-color: #006699;
color: #FFFFFF;
}

#menu ul li ul li a {
clear: left;
line-break: strict;
background-color: #006699;
padding: 5px;
font-size: 10px;
}

#menu ul li ul li {
display: block;
float: none;
clear: left;
}

.menu ul li {
display: inline-block;
position: relative;
}

.menu li ul {
position: absolute;
}

.menu li:not(:hover) ul {
display: none; 
}

我想創建一個下拉菜單，其中一個子項位於另一個子項之下。 嘗試了很多，但我無法正確安排子項目。

Answer 1

您可以將代碼放在jsfiddle中嗎？ 在此之前，我可以告訴您主<li>子元素之一是display: block; 並將其他頂級<li>移出位置。

Answer 2

你省略了什么？ 您可以在此提琴中使用確切的代碼，檢查CSS，是否有覆蓋某些規則的內容，檢查每個元素，看看何時粘貼在此處的規則被覆蓋。