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; 
}