0

我尝试了各种显示和位置设置，但我不知道如何在未来的下拉菜单中排列子项。它们与其他菜单项重叠，并且不会留在应有的位置。不幸的是，即使这个问题+答案也无法帮助我。

这是我的 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>
4

2 回答 2

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

于 2012-10-16T22:00:08.517 回答
0

如果给一个元素绝对定位

position: absolute;

在您明确告诉它您希望它出现在页面上的哪个位置之前，它不知道该去哪里。

改变这个小提琴，直到它做你想要的：http: //jsfiddle.net/hillsons/LUqpM/

于 2012-10-16T21:55:58.633 回答