javascript - JQuery:当用户悬停时显示子菜单 ul - 不起作用

Question

要求:当用户将鼠标悬停在导航中的 li 上时，应显示名为 .sub-menu 的子子页面 ul。

这是层次结构

About

• Our Mission
• Members Bank
• Another Child

我的尝试:子菜单 ul 设置为 display:none; 在 jQuery 中，我尝试过用户悬停时设置子菜单的 css 显示 block :!important;

这是脚本:#menu-item-165 是 about li id

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

子页面ul的CSS

.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
} 

menu-item-has-children 当菜单项有子菜单时使用 WordPress 中的类。