css - 排列 CSS3 下拉菜单

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 以便它们在悬停时不会重排页面。