Question

要求：当用户在导航栏中悬停大约li时，应显示名为.sub-menu的子子页面ul。

这是层次结构

关于


我们的使命

会员银行

另一个孩子

我的尝试：子菜单ul设置为display:none;在jQuery中，我尝试过用户将鼠标菜单的css设置为display block: !important; < / p>

以下是脚本：＃menu-item-165是关于li id

jQuery("#menu-item-165").hover(function() { 
  jQuery("sub-menu").css("display","block !important");
});

子子页面的CSS ul

.sub-menu {
  display: block !important;
  flex-direction: column !important;    
  padding: 0;
  z-index: 999;
  background-color: black;
  position: absolute;
  right:195px;
  top: 53px;   
}

HTML是wordpress呈现的。

<div class="menu-primary-menu-links-container">
  <ul id="menu-primary-menu-links" class="menu">
    <li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-21 current_page_item menu-item-167"><a href="http://localhost/wordpress/">Home</a></li>
    <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-165"><a href="http://localhost/wordpress/about/">About</a>
      <ul class="sub-menu">
        <li id="menu-item-180" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-180"><a href="http://localhost/wordpress/about/our-team/">Our Team</a></li>
        <li id="menu-item-179" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-179"><a href="http://localhost/wordpress/about/our-mission/">Our Mission</a></li>
        <li id="menu-item-178" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-178"><a href="http://localhost/wordpress/about/members-data-bank/">Members Data Bank</a></li>
      </ul>
    </li>
    <li id="menu-item-170" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-170"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li>
    <li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-166"><a href="http://localhost/wordpress/blog/">Blog</a></li>
    <li id="menu-item-164" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-164"><a href="http://localhost/wordpress/contact/">Contact</a></li>
  </ul>
</div>

以下是直播网站的链接：http://radian3.com/ ...任何想法???

Answer 1

你在jquery中的CSS选择器是错误的，它应该是：

jQuery(".sub-menu").css("display","block");

你的CSS错了，.sub-menu初始化为display：block而不是display：none;

此外，我无法看到您提供的链接上的菜单。但是，为什么不尝试使用这种更通用的CSS解决方案（不使用ID）

.menu-item-has-children:hover .sub-menu {
   display:block
}

当菜单项具有子菜单时，将使用wordpress中的

menu-item-has-children 类。

Answer 2

您在子菜单选择器中忘记了一个点。试试这个

$(document).ready(function(){
  $("#menu-item-165").hover(function(){
      $(".sub-menu").css("display","block");
      }, function(){
      $(".sub-menu").css("display","none");
  });
});

JQuery：当用户悬停时显示子菜单ul - 不工作

关于

2 个答案: