下拉子菜單問題

Question

因此，我試圖教自己如何創建和自定義wordpress網站，並且我在這段代碼上停留了2天。 因此，我在這里發布消息，以便有人可以幫助我了解我的錯誤操作。 我大約在一兩個星期前才開始自學，所以這是我的知識背景。

好吧，我正在嘗試創建一個導航菜單，該菜單位於網站標題容器正下方的網頁標題中。 除了在側邊欄小部件和頁腳中，該主題不提供菜單位置。 我設法通過主題文件為自定義菜單添加了新的主題位置。

我遇到的問題是，我無法在CSS中設置其樣式，因此當您將鼠標懸停在頂部導航菜單中的頁面上時，該子菜單會下拉。 這是我目前遇到的問題的html和CSS：

 .top-menu {} .top-menu ul { list-style-type: none; overflow: hidden; width: 900px; margin: 0px auto; ; } .top-menu ul li { width: 175px; height: 50px; float: left; } .top-menu ul li.current-menu-item { background: blue } .top-menu ul li:hover { background: red } .top-menu ul a { font: 20px Cantarell, Arial, sans-serif; color: #000; display: block; width: 175; height: 50px; line-height: 50px; text-decoration: none; text-align: center; } .top-menu ul ul { display: none; position: absolute; top: 100%; left: 0; background: #fff; padding: 0 } .top menu ul ul li { float: none; width: 200px; } .top menu ul ul a { line-height: 120%; padding: 10px 15px } 

 <div class="top-menu"> <ul id="menu-header" class="menu"> <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://notmymamaskitchen.com/home/">Home</a> </li> <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://notmymamaskitchen.com/about/">About</a> </li> <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-27"><a href="http://notmymamaskitchen.com/recipes/">Recipes</a> <ul class="sub-menu"> <li id="menu-item-51" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-51"><a href="http://notmymamaskitchen.com/category/appetizers-snacks/">Appetizers &amp; Snacks</a> </li> <li id="menu-item-52" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-52"><a href="http://notmymamaskitchen.com/category/breads/">Breads</a> </li> <li id="menu-item-53" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-53"><a href="http://notmymamaskitchen.com/category/breakfast/">Breakfast</a> </li> </ul> </li> <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://notmymamaskitchen.com/contact/">Contact</a> </li> </ul> </div> 

請幫助！，我的頭發快要拉：/

PS。 這是我在此網站上提出的第一個問題。

Answer 1

Michael評論的jsfiddle會為您提供幫助，我建議您使用它，我唯一不喜歡的是使用Descendant Selectors和使用opacity: 0而不是display: none （我知道這是為了轉換，但以此方式，您將在其下方顯示菜單點），但總的來說，這是一個很好的起點。

我只想給您一些提示，以幫助您理解它，並提供一些改進代碼的方法。

了解行為。

您有.top-menu ul ul {display: none;}因此您的.sub-menu根本不會顯示（對布局沒有影響），因此為了顯示它，我們使用：

.menu-item{
    position: relative; /*with respect to this element sub-menu is positioned*/
    color: #333;
}
.menu-item:hover .sub-menu{
    display: block;  /*show the menu when you hover the li.menu-item*/
}

此時，您應該看到菜單，但是請注意，您擁有.top-menu ul { overflow: hidden;}因此溢出被裁剪了，其余內容將是不可見的，包括.sub-menu只是將其刪除，然后您可以看到您的.sub-menu但它的樣式會有些許泛濫，因為它受到樣式.top-menu ul ， .top-menu ul li等的影響。

因此，我的建議：以Michael示例為起點，但避免使用Descendant Selectors，這不僅性能不佳，而且非常脆弱，因為對HTML的更改很容易破壞CSS，最好簡單地創建一個新的CSS類選擇器順便說一下，您已經在HTML中使用它們了。

進行檢查，這將有助於您改善代碼http://modernweb.com/2013/08/12/writing-better-css/?utm_source=html5weekly&utm_medium=email

Answer 2

您必須在父項的： :hover上啟用子菜單：

.top-menu ul li:hover > ul {
    display: block;
}

 .top-menu ul { list-style-type: none; width: 900px; margin: 0px auto; position: relative; } .top-menu ul li { width: 175px; height: 50px; float: left; } .top-menu ul li.current-menu-item { background: blue } .top-menu ul li:hover { background: red } .top-menu ul a { font: 20px Cantarell, Arial, sans-serif; color: #000; display: block; width: 175; height: 50px; line-height: 50px; text-decoration: none; text-align: center; } .top-menu ul ul { display: none; position: absolute; background: #fff; padding: 0 } .top-menu ul ul li { float: none; width: 220px; } .top-menu ul ul a { line-height: 120%; padding: 10px 15px; text-align: left; } .top-menu ul li:hover > ul { display: block; } 

 <div class="top-menu"> <ul id="menu-header" class="menu"> <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://notmymamaskitchen.com/home/">Home</a> </li> <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://notmymamaskitchen.com/about/">About</a> </li> <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-27"><a href="http://notmymamaskitchen.com/recipes/">Recipes</a> <ul class="sub-menu"> <li id="menu-item-51" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-51"><a href="http://notmymamaskitchen.com/category/appetizers-snacks/">Appetizers &amp; Snacks</a> </li> <li id="menu-item-52" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-52"><a href="http://notmymamaskitchen.com/category/breads/">Breads</a> </li> <li id="menu-item-53" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-53"><a href="http://notmymamaskitchen.com/category/breakfast/">Breakfast</a> </li> </ul> </li> <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://notmymamaskitchen.com/contact/">Contact</a> </li> </ul> </div> 

Answer 3

在您提供的所有提示和幫助以及本視頻提供的一些幫助之間，我成功地為網站成功獲得了功能正常且樣式豐富的下拉菜單！ 謝謝大家！