CSS - 單層下拉菜單

Question

我在設計Wordpress主題，我唯一的問題就是下拉菜單。 使用「顯示」和...屬性設置那些「ul」和「li」選擇器的樣式。 即使閱讀教程並查看其他網站的CSS（Firebug），我仍然無法創建一個！ 有什麼特別的程序或者我可以學習的好源？ 假設我想要設計一個級別的下拉菜單。 謝謝

Answer 1

我的一個很好的來源是http://lwis.net/free-css-drop-down-menu/ 你可以看到使用的基本結構。

Answer 2

馬赫迪，

創建一個跨瀏覽器兼容的下拉菜單很簡單，只要你不要過分複雜化，並有一個體面的理解元素類型和CSS的定位模型。有一些標準的例子可以讓你很容易。我會盡量爲你提供一個儘可能簡單的答案讓你理解（因爲我的大腦過於複雜，直到我做了一些小小的研究）。

頂層菜單

這是很好的做法，所有菜單包括子菜單是ul元素。這有幾個原因。

1. 它自然有你需要的大部分風格。
2. 無論如何，菜單是一個選項列表，所以它不會讓它成爲一個列表。
3. 它可以幫助殘疾人士
4. 它允許嵌套。

與ul元素的問題是他們有那些討厭的子彈。此外，兒童不會自然流動在一起。它們全部出現在單獨的行中。所以，我們有兩個選項來修復li。我們可以float他們，但這可能會相當尷尬。我不推薦它。或者我們可以改變它的類型。好吧，我們在其中包含另一個塊，所以inline-block對此非常完美。

<!-- the HTML for the menu --> 
<ul class="menu"> 
    <li class="submenu"><a href="url">link</a></li> 
    <li class="submenu"><a href="url">link</a></li> 
    <li class="submenu"><a href="url">link</a></li> 
</ul> 

/* The CSS for the menu */ 
ul.menu { 
    list-style-type:none; /* Gets rid of the bullets. */ 
} 
li.submenu { 
    display:inline-block; /* Makes the listitems appear on the same row. */ 
} 

**你的子菜單**

現在，嵌套ul元素必須是一個列表項。如果您將自己的下拉框ul置於li本身，瀏覽器將始終正確解釋它。現在，我們不必宣佈任何有趣的事情。僅舉新ul同原來的菜單，就像這樣：

<!-- Your new HTML --> 
<ul class="menu"> 
    <li class="submenu"><a href="url">link</a> 
     <ul class="menu"> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
     </ul> 
    </li> 
    <li class="submenu"><a href="url">link</a> 
     <ul class="menu"> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
     </ul> 
    </li> 
    <li class="submenu"><a href="url">link</a> 
     <ul class="menu"> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
     </ul> 
    </li> 
</ul> 

/* Your new CSS. Notice nothing has changed. */ 
ul.menu { 
    list-style-type:none; /* Gets rid of the bullets. */ 
} 
ul.menu li { 
    display:inline-block; /* Makes the listitems appear on the same row. */ 
} 

下一步。讓下拉菜單出現。

現在，我們有了我們的跨瀏覽器結構，我們只需要調整幾件事情。我們需要先讓菜單出現並消失。因爲我們只希望這發生在一個子菜單中，我們得到了更具體的：

/* Add this to your CSS. */ 
li.submenu ul.menu { 
    display:none; /* Makes the submenu disappear. */ 
} 
li.submenu:hover ul.menu { 
    display:block; /* Makes the submenu appear. */ 
} 

現在，如果你看看，你的菜單出現，適當地消失。沒有造型，只是爲你列出。在所有瀏覽器中以相同的方式工作...哦，等等！ IE越來越大。那麼，這是一個簡單的問題。你看，IE解釋填充不同於其他填充。讓它成爲一個非問題：

/* Add this to your CSS. */ 
menu * { 
    padding:0; /* Width problem solved. */ 
} 

現在，另一個問題......你的子菜單是水平的。原因是因爲我們告訴它應該是我們原來的。

ul.menu li { 
    display:inline-block; /* Makes the listitems appear on the same row. */ 
} 

我們可以解決這個問題，我更具體。

/* Add this to your CSS. */ 
li.submenu ul.menu li { 
    display:block; 
} 

現在是垂直的！在任何主流瀏覽器中進行測試，您將看到這些是跨瀏覽器下拉菜單所必需的唯一組件。

菜單

<ul class="menu"> 
    <li class="submenu"><a href="url">link</a> 
     <ul class="menu"> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
     </ul> 
    </li> 
    <li class="submenu"><a href="url">link</a> 
     <ul class="menu"> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
     </ul> 
    </li> 
    <li class="submenu"><a href="url">link</a> 
     <ul class="menu"> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
      <li><a href="url">link</a> 
     </ul> 
    </li> 
</ul> 

最後的CSS最終的HTML菜單

menu * { 
    padding:0; /* Width problem solved. */ 
} 

ul.menu { 
    list-style-type:none; /* Gets rid of the bullets. */ 
} 
li.submenu { 
    display:inline-block; /* Makes the listitems appear on the same row. */ 
} 

li.submenu ul.menu { 
    display:none; /* Makes the submenu disappear. */ 
} 
li.submenu:hover ul.menu { 
    display:block; /* Makes the submenu appear. */ 
} 

li.submenu ul.menu li { 
    display:block; 
} 

此解決方案不要求滑稽定位或寬度聲明。

希望這會有所幫助！

FuzzicalLogic

Answer 3

如果您只想創建一個簡單的單級菜單。這是上面通過Fuzzical Logic解釋的，但您可以使用僞類:hover來顯示和隱藏下拉菜單。這是簡單的explained in this article。

希望它有幫助