WordPress自定义下拉菜单
问题描述:
我在我的主题中使用WordPress菜单,但我试图正确设计CSS样式。它没有以正确的方式显示下拉菜单。我不认为任何人可以检查出来,看看发生了什么?我将为您呈现下面的HTML和CSS,以及指向实时测试页面的链接。WordPress自定义下拉菜单
<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,只需要一双新的眼睛来看它。
谢谢!
答
你想要做的第一件事是:
#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;
}
嗨Blackunknown,我已经完全取代了CSS代码,另一个简单的下拉菜单。现在只需要调整菜单。不管怎么说,还是要谢谢你! –