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 是关于 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 类在菜单项有子菜单时使用。