Question

我已经创建了我的标准Wordpress菜单，包括子菜单项，并且出于某种原因遇到了问题 - 下拉项目出现在页面加载上，当我将鼠标悬停然后鼠标移出时消失。

默认情况下应用CSS隐藏.sub菜单并不能解决问题，我倾向于认为这是我的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下拉问题

1 个答案: