爲什麼我的css菜單在下拉菜單上有文本重疊

Question

我無法讓我的下拉菜單（子菜單）停止重疊文本。以下是我的HTML + CSS。

<ul class="top-menu"> 
    <li><a href="index.html" >Events </a></li> 
    <li> 
     <a href="index-1.html">Store</a> 
     <ul> 
      <li><a href="index-2.html" >Imagination CD</a></li> 
      <li><a href="index-2.html" >Total Relax</a></li> 
      <li><a href="index-2.html" >Super Study</a></li> 
     </ul>  
    </li> 
    </li> 
    <li><a href="index-2.html" class="active">About Us</a></li> 
    <li><a href="index-3.html">Contact</a></li> 
</ul> 

.top-menu { 
    position: absolute; 
    padding: 32px 00 0 10px; 
    height: 85px; 
} 
.top-menu li{ 
    padding:0 24px 0 0; 
} 
.top-menu li, .top-menu li a{ 
    display:block; 
    float:left; 
} 
.top-menu ul, .top-menu ul a{ 
    position: absolute; 
    display: none; 
    z-index:999px; 
    line-height: 30px; 
    top: 12px; 
} 
.top-menu li a{ 
    padding:0 0 0 30px; 
    color:#4d3925; 
    font-size:25px; 
    line-height:26px; 
    text-decoration:none; 
} 
.top-menu a:hover, .top-menu .active { 
    color:#f29869; 
} 
.top-menu li:hover ul a, .top-menu li:hover ul { 
    position: abolute; 
    display: block; 
    padding: 32px 0 0 14px; 
    font-size: 16px; 
    line-height: 30px; 
    z-index: 999px; 
} 

參考菜單：http://www.nicoheins.com/lux/

Answer 1

有許多與此下拉問題。但是，導致此特定問題的那個是您的選擇器.top-menu ul, .top-menu ul a中的屬性position:absolute;。一旦你擺脫了這一點，你的鏈接將不再堆疊在彼此之上。

但是你仍然需要做更多的工作才能讓你的菜單看起來更新鮮。

不要插我自己的工作，但我有一個相當不錯的下拉式（我想至少）可以在Github上使用託管。 Check it out here。如果你不想淡出或箭頭，你可以刪除這些，然後應用你自己的風格。其餘的應該按你想要的那樣工作。

編輯修改的其他問題：

此外，原題只是要求解決我這個下拉注意的問題之一。另一個事實是，您的子菜單ul正在將父母li推向右側。您可以通過應用該樣式解決這個問題：

.top-menu > li { 
    position: relative; 
} 
.top-menu li ul { 
    position: absolute; 
} 

另一個原因是，你的所有的li S的風格都以float:left;的事實。您只需要以這種方式設置頂級li。這是由這部分套管：

.top-menu li, .top-menu li a{ 
    display:block; 
    float:left; 
} 

改變這

.top-menu > li, .top-menu > li > a{ 
    display:block; 
    float:left; 
} 

會解決這個問題，但你需要將display:block;重新應用到子菜單a秒。

我想象你的下一個關注的是關於子菜單a S之間的巨大間距。這是因爲你這個代碼針對他們：

.top-menu li:hover ul a, .top-menu li:hover ul { 
    position: abolute; 
    display: block; 
    padding: 32px 0 0 14px; 
    font-size: 16px; 
    z-index: 999px; 
} 

這padding-top是相當大的！確保你的選擇器只有選擇你想要的，否則你最終會得到這樣的奇怪行爲。當你使用類似於下拉的東西時，這是特別重要的，它在lis內有li s，並且它們需要被設計成完全不同的樣式。

對於選擇器的一個很好的概述，check out this page。

這個的功能版本是here。請注意，我試圖儘可能少地更改原始的css。我認爲這限制了我編寫儘可能最好的下拉的能力，我想我可以寫。但這確實有用！

Here's a JSFiddle與重寫代碼，完全和乾淨地工作！