WordPress 下拉问题

Question

我已经创建了我的标准 Wordpress 菜单，包括子菜单项，但由于某种原因运行出现问题 - 下拉项出现在页面加载时，当我悬停它然后鼠标移开时消失。

默认应用CSS隐藏.sub-menu并不能解决问题，我倾向于认为这是我的CSS冲突，但我不明白为什么。有人有什么想法吗？

wp_nav_menu 输出为：

<!-- Navigation -->
<div class="navigate hidden-xs hidden-sm" role="navigation" style="position: relative;">
    <ul>
        <div class="menu-primary-navigation-container">
            <ul id="menu-primary-navigation-1" class="menu">
                <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-11 current_page_item menu-item-14"><a href="http://localhost/aes-wp/">Home</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9"><a href="http://localhost/aes-wp/about-us/">About Us</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-23"><a href="http://localhost/aes-wp/product-areas/">Product Areas</a>
                   <ul class="sub-menu">
                       <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://localhost/aes-wp/product-areas/dust-fume-extraction/">Dust and Fume Extraction</a></li>
                   </ul>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://localhost/aes-wp/news/">News</a></li>
            </ul>
         </div>          
      </ul>
      <a href="#" class="shop">Shop <i class="glyphicon glyphicon-shopping-cart" style="color: #fff;"></i></a>
    </div>
    <!-- END Navigation -->

...和我关联的 CSS 如下：

header .navigate ul li:first-child a {
  border-top-left-radius:     5px; 
  border-bottom-left-radius:  5px; 
  margin-left:                -10px;
}

header .navigate {
  margin:                   120px 0 30px 0;
  width:                    100%;
  height:                   48px;
  border-radius:            5px;
  background:               url("assets/img/nav.png") repeat-x;
}

header .navigate ul:first-child {
  list-style-type:          none;
  margin:                   0;
  padding:                  0 0 0 5px;
  height:                   48px;
  width:                    100%;
  position:                 relative;
}

header .navigate ul:first-child li {
  display:                  block;
  float:                    left;
  height:                   48px;
}

header .navigate ul:first-child li a {
  display:                  block;
  height:                   48px;
  font-size:                14px;
  font-family:              'novnormal', serif;
  color:                    #fff;
  line-height:              48px;
  padding:                  0 15px 0 15px;
}

header .navigate ul li a:hover,
header .navigate ul li a.active,
header .navigate ul li.current-menu-item a {
  text-decoration:          none;
  background:               #8abb06 !important;
}

在此先感谢您的帮助！

Answer 1

您在 aes 主题中有一些 javascript，custom.js 正在作用于它，例如。

$('.navigate ul li ul').bind('mouseleave', function() {
  $(this).hide();
});

要确认它是 javascript 干扰，请在浏览器中禁用 javascript，鼠标移开时它不再消失。

一些快速 css 可能会产生所需的行为：

ul.sub-menu {
display: none;
position: absolute;
}

.menu:hover ul.sub-menu {
  display: block;
}

与绝对位置相比，您可能更喜欢其他方式 - 但这可能是一个起点。

WordPress 下拉问题

Wordpress dropdown issue

css

wordpress

jquery