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

希望有人能帮忙!我为此绞尽脑汁一段时间，只需要一双新的眼睛来审视它。

谢谢!

Answer 1

你要做的第一件事是:

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

代替以下内容:

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

当您将鼠标悬停在它们上方时，这将阻止您的菜单垂直跳跃。

其次，您的下拉菜单没有样式。你自己试过了吗？因为我似乎无法在页面上找到它。

附言。为了测试它的外观，我用一个简单的方法隐藏了子菜单:

.sub-menu{
    display:none;
}