排列CSS3下拉菜單

我嘗試了各種顯示和位置設置，但我不知道如何在我未來的下拉菜單中安排子項目。它們與其他菜單項重疊並且不留在他們應該的地方。不幸的是，即使this question + answer也無法幫助我。排列CSS3下拉菜單

這是我的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>

來源

2012-10-16 Katy

把一些html放在這裏。將輸出粘貼到jsfiddle.net並給我們一個鏈接 – andrewk

我編輯了我的問題並添加了HTML/PHP代碼。 – Katy

*渲染* HTML會很好，而不是PHP。這可以讓人們在在線沙盒中玩耍它。 – tuff

我做了一些更改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。這允許子菜單相對於第一級項目進行定位。然後，子菜單uls將具有position: absolute，以便它們在懸停時不會重新排列頁面。

來源

2012-10-16 22:00:08 tuff

謝謝你，幫了我很多。我不知道一個不是（：懸停）選擇器存在，這真棒！ – Katy

如果你給一個元素絕對定位

position: absolute;

它不知道該走到哪裏，除非您明確地告訴它它要在頁面上顯示的位置。

更改這個小提琴，直到你想要做什麼：http://jsfiddle.net/hillsons/LUqpM/

來源

2012-10-16 21:55:58

即使我接受另一個答案，謝謝你的幫助！ – Katy

排列CSS3下拉菜單

回答

相關問題