0

我尝试使用 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; 
}

我想创建一个下拉菜单,其中一个子项位于另一个子项下方。尝试了很多,但我无法正确安排子项目。

4

2 回答 2

0

你能把你的代码放在一个jsfiddle中吗?在那之前,我可以告诉你 main 的一个子元素<li>display: block;并且将另一个 top level 推到<li>了位置之外。

于 2012-10-17T22:28:58.353 回答
0

你遗漏了什么?你在这个小提琴中的确切代码有效,检查你的 CSS,你有一些覆盖你的规则的东西,检查每个元素,看看你在这里粘贴的规则何时被覆盖。

于 2012-10-17T22:29:03.647 回答