WordPress自定義下拉菜單

Question

我在我的主題中使用WordPress菜單，但我試圖正確設計CSS樣式。它沒有以正確的方式顯示下拉菜單。我不認爲任何人可以檢查出來，看看發生了什麼？我將爲您呈現下面的HTML和CSS，以及指向實時測試頁面的鏈接。

Live Test Page

<div id="nav-primary" class="nav"><nav> 
    <?php if (is_user_logged_in()) { 
     wp_nav_menu(array('theme_location' => 'logged-in-menu')); /* if the visitor is logged in, this primary navigation will be displayed */ 
    } else { 
     wp_nav_menu(array('theme_location' => 'header-menu')); /* if the visitor is NOT logged in, this primary navigation will be displayed. if a single menu should be displayed for both conditions, set the same menues to be displayed under both conditions through the Wordpress backend */ 
    } ?> 
</nav></div><!--#nav-primary--> 

有很多垃圾在下面的CSS，但我可以剝奪了這一點，一旦我有工作的功能，這裏是CSS ...

#nav-primary {width: 600px;} 
#nav-primary {list-style: none; padding: 0px; margin: 0px; height: 68px; position: relative; z-index: 500; font-family: arial, verdana, sans-serif;} 
#nav-primary ul, #nav-primary li {list-style: none;} 
#nav-primary li {float: left;} 
#nav-primary li a {float: left; display: block; height: 68px; line-height: 68px; background: none; color: #FFFFFF; text-decoration: none; font-size: 11px; font-weight: bold; padding: 0 10px;} 
/*#nav-primary table {border-collapse: collapse; width: 0px; height: 0px; position: absolute; top: 0px; left: 0px;}*/ 

#nav-primary li:hover {position: relative; z-index: 200;} 
#nav-primary li:hover > a {color: #00e5c3; background: #000000; border-bottom: 3px solid #00e5c3;} 
#nav-primary li:hover > a.sub {color: #00e5c3; background-color: #000000; border-bottom: 3px solid #00e5c3;} 
#nav-primary li.current a {color: #00e5c3; background: #000000; border-bottom: 3px solid #00e5c3;} 
#nav-primary li a.sub {background: none;} 
#nav-primary li.current a.sub {color: #00e5c3; background: #000000; border-bottom: 3px solid #00e5c3;} 

#nav-primary :hover ul {left: 0px; top: 71px; width: 120px; background: none;} 

/* keep the 'next' level invisible by placing it off screen. */ 
#nav-primary ul, #nav-primary :hover ul ul {position: absolute; left: -9999px; top: -9999px; width: 0px; height: 0px; margin: 0px; padding: 0px; list-style: none;} 
#nav-primary :hover ul :hover ul {left: 120px; top: -1px; background: #000; white-space: nowrap; width: 185px; z-index: 200; height: auto;} 
#nav-primary :hover ul li {margin: 0px; border-bottom: none;} 
#nav-primary :hover ul li a {width: 185px; padding: 0px; text-indent: 10px; background: #000; color: #FFF; height: 30px; line-height: 30px; border-bottom: none;} 
#nav-primary :hover ul li a.fly {background: #000;} 
#nav-primary :hover ul :hover {background-color: #00e5c3; color: #000; border-bottom: none;} 
#nav-primary :hover ul :hover a.fly {background-color: #00e5c3; color: #000; border-bottom: none;} 
#nav-primary :hover ul li.currentsub a {background: #FFF; color: #000;} 
#nav-primary :hover ul li.currentsub a.fly {background: #FFF; color: #000;} 

希望有人能幫助！在這一段時間裏，我的腦子一直在ra and，只需要一雙新的眼睛來看它。

謝謝！

Answer 1

你想要做的第一件事是：

#nav-primary :hover ul {left: 0px; top: 71px; background: none;} 

取而代之的是以下內容：

#nav-primary :hover ul {left: 0px; top: 71px; width: 120px; background: none;} 

這將從當你將鼠標懸停在其垂直跳躍停止你的菜單。其次，你的下拉菜單沒有樣式。你自己試過了嗎？因爲我似乎無法在網頁上找到它。

PS。爲了測試它的外觀，我已經隱藏在子菜單用一個簡單的：

.sub-menu{ 
    display:none; 
}