Question

我尝试了各种显示和位置设置，但我不知道如何在我将来的下拉菜单中安排子项目。它们与其他菜单项重叠，不会留在应有的位置。不幸的是，即使this question + answer也无法帮助我。

这是我的CSS代码：

#menu ul li a {
text-decoration: none;
background-color: #FF0000;
font-size: 16px;
margin: 10px 5px 10px 5px;
display: block;
float: left;
position:relative; }

#menu ul li a:hover {
background-color: #0000FF; }

#menu ul li ul li a {
clear: left;
background-color: #6F0;
font-size: 10px;
display: block;
position: absolute; }

我尝试了像这样的组合选择器

#menu ul li a + #menu ul li ul li a { }

li.page_item > li.page_item { }

但他们也没有工作。

编辑：这是一些HTML / PHP代码。这是一个wordpress模板，现在我想我应该在之前提到过......

            <div id="menu" role="navigation">
            <?php /* Navigation menu. */ ?>
            <?php wp_nav_menu(array('sort_column' => 'menu_order', 'menu' => 'Categories', 'container_class' => 'main-menu-class',
                                    'container_id' => 'main-menu-id', 'theme_location'  => 'header', 'show_home' => true)); ?>
        </div> <!-- menu -->

呈现的HTML代码是：

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

Answer 1

我已对您的CSS进行了一些更改以解决重叠问题。

#menu ul li a {
  float: none; /* no need for float */
}

#menu ul li ul li a {
 position: static; /* no need for absolute positioning here */
}

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

.menu li ul {
 position: absolute; 
}

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

这是一个演示：http://jsbin.com/aloreh/1/edit

您的一般问题是，您将position: absolute和position: relative置于错误的位置。您将所有链接样式应用于实际链接元素是件好事，但您需要将定位应用于列表和列表项。

因此，第一级列表项需要position: relative。这允许子菜单相对于第一级项目定位。然后子菜单ul将有position: absolute，以便当它们在悬停时出现时不会重排页面。

Answer 2

如果给出元素绝对定位

position: absolute;

在您明确告诉它要在页面上显示的位置之前，它不知道去哪里。

更改此小提琴，直到它完成您想要的操作：http://jsfiddle.net/hillsons/LUqpM/

安排CSS3下拉菜单

2 个答案: