CODEWITHSUNDEEP
javascriptjqueryhtmlcsswordpress
billy
billy

Reputation: 1493

JQuery: Display sub-menu ul when user hovers - not working

Requirement: When user hovers over about li in the nav the sub child pages ul called .sub-menu should display.

Here is the hierarchy

About

  • Our Mission
  • Members Bank
  • Another Child

My Attempt: The sub-menu ul is set to display:none; In jQuery I've tried where anytime user hovers to set the css of sub-menu to display block: !important;

Here is the Script: #menu-item-165 is the about li id

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

CSS for sub child pages 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 is wordpress rendered.

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

Here is the link to the live website: http://radian3.com/ ... any idea???

Upvotes: 2

Views: 71

Answers (2)

Konzule
Konzule

Reputation: 1

You Forgot a Dot in the sub-menu Selector. Try this 

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

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273086

you CSS selector in the jquery is wrong, it should be :

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

And your CSS is wrong, .sub-menu is initialized as display:block and not display:none;

Also, i am not able to see the menu on the link you gave. But why don't you try a CSS solution which is more generic (without the use of ID) like this 

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

menu-item-has-children class in wordpress is used when the menu item has submenu.

Upvotes: 3

Related Questions