如何将课程添加到有孩子的菜单项中

Question

i刚刚创建菜单，其中一些项目具有子项目，如您在我的HTML结构上所见：

<nav id="site-navigation" class="main-navigation" role="navigation">
  <div class="menu-menu-1-container">
    <ul id="primary-menu" class="menu">
      <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-41">
        <a href="http://powersol.burnnotice.co.za/">Home</a>
      </li>
      <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-42">
        <a href="http://powersol.burnnotice.co.za/our-dealers/">Our Dealers</a>
        <ul class="sub-menu">
          <li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-250">
            <a href="http://powersol.burnnotice.co.za/dealer-1/">Dealer 1</a>
          </li>
          <li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246">
            <a href="http://powersol.burnnotice.co.za/dealer-2/">Dealer 2</a>
          </li>
          <li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245">
            <a href="http://powersol.burnnotice.co.za/dealer-3/">Dealer 3</a>
          </li>
          <li id="menu-item-249" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-249">
            <a href="http://powersol.burnnotice.co.za/dealer-4/">Dealer 4</a>
          </li>
        </ul>
      </li>
      <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39">
        <a href="http://powersol.burnnotice.co.za/companies/">Companies</a>
        <ul class="sub-menu">
          <li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247">
            <a href="http://powersol.burnnotice.co.za/companies-1/">Companies 1</a>
          </li>
          <li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253">
            <a href="http://powersol.burnnotice.co.za/companies-3/">Companies 3</a>
          </li>
          <li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248">
            <a href="http://powersol.burnnotice.co.za/companies-4/">Companies 4</a>
          </li>
        </ul>
      </li>
      <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">
        <a href="http://powersol.burnnotice.co.za/contact/">Contact</a>
      </li>
    </ul>
  </div>        
</nav>

对于CSS，我首先放一个显示，因为最初是不可见的。

.main-navigation ul li{
    display: none;
}

现在，如何在每次悬停在该特定项目上时都有子项目的菜单项中添加类下拉菜单？

在这里我的JS，但是当我悬停在项目上时，它无能为力：

$('.main-navigation ul > li.menu-item-has-children').on("hover" function(){
    $('.main-navigation ul > li.menu-item-has-children').removeClass('dropdown-menu');
    if($(this).hasClass('dropdown-menu')){
        $(this).addClass('dropdown-menu');
    }else{
        $(this).addClass('dropdown-menu');
    }
});

在这里我的笔（如果需要）

Answer 1

尝试此演示，仅使用CSS，检查下拉菜单，仅此下拉

#primary-menu > li {
	display:inline-block;
	position:relative;
	margin:15px;
}
#primary-menu > li ul {
	position:absolute;
	left:0;
	padding:0;
	display:none;
}
#primary-menu > li ul li {
	white-space:nowrap;
}
#primary-menu > li:hover ul {
	display:block;
}

<nav id="site-navigation" class="main-navigation" role="navigation">
  <div class="menu-menu-1-container">
    <ul id="primary-menu" class="menu">
      <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-41">
        <a href="http://powersol.burnnotice.co.za/">Home</a>
      </li>
      <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-42">
        <a href="http://powersol.burnnotice.co.za/our-dealers/">Our Dealers</a>
        <ul class="sub-menu">
          <li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-250">
            <a href="http://powersol.burnnotice.co.za/dealer-1/">Dealer 1</a>
          </li>
          <li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246">
            <a href="http://powersol.burnnotice.co.za/dealer-2/">Dealer 2</a>
          </li>
          <li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245">
            <a href="http://powersol.burnnotice.co.za/dealer-3/">Dealer 3</a>
          </li>
          <li id="menu-item-249" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-249">
            <a href="http://powersol.burnnotice.co.za/dealer-4/">Dealer 4</a>
          </li>
        </ul>
      </li>
      <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39">
        <a href="http://powersol.burnnotice.co.za/companies/">Companies</a>
        <ul class="sub-menu">
          <li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247">
            <a href="http://powersol.burnnotice.co.za/companies-1/">Companies 1</a>
          </li>
          <li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253">
            <a href="http://powersol.burnnotice.co.za/companies-3/">Companies 3</a>
          </li>
          <li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248">
            <a href="http://powersol.burnnotice.co.za/companies-4/">Companies 4</a>
          </li>
        </ul>
      </li>
      <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">
        <a href="http://powersol.burnnotice.co.za/contact/">Contact</a>
      </li>
    </ul>
  </div>        
</nav>

Answer 2

您可以做到CSS :hover本身。但是，正如您在jquery中想要的那样，这是解决方案

使用$('.main-navigation ul > li.menu-item-has-children').on("mouseenter mouseleave", function(e){。mouseenter mouseleave代替hover

$('.main-navigation ul > li.menu-item-has-children').on("mouseenter mouseleave",  function(e){
    $('.main-navigation ul > li.menu-item-has-children').removeClass('dropdown-menu');
    if(e.type=='mouseenter')
    $(this).addClass('dropdown-menu');
});

.main-navigation ul ul{
    display: none;
}
.main-navigation ul li.dropdown-menu ul{
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="site-navigation" class="main-navigation" role="navigation">
    <div class="menu-menu-1-container">
    <ul id="primary-menu" class="menu">
        <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-41">
            <a href="http://powersol.burnnotice.co.za/">Home</a>
        </li>
        <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-42">
            <a href="http://powersol.burnnotice.co.za/our-dealers/">Our Dealers</a>
            <ul class="sub-menu">
                <li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-250">
                    <a href="http://powersol.burnnotice.co.za/dealer-1/">Dealer 1</a>
                </li>
                <li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246">
                    <a href="http://powersol.burnnotice.co.za/dealer-2/">Dealer 2</a>
                </li>
                <li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245">
                    <a href="http://powersol.burnnotice.co.za/dealer-3/">Dealer 3</a>
                </li>
                <li id="menu-item-249" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-249">
                    <a href="http://powersol.burnnotice.co.za/dealer-4/">Dealer 4</a>
                </li>
            </ul>
        </li>
        <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39">
            <a href="http://powersol.burnnotice.co.za/companies/">Companies</a>
            <ul class="sub-menu">
                <li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247">
                    <a href="http://powersol.burnnotice.co.za/companies-1/">Companies 1</a>
                </li>
                <li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253">
                    <a href="http://powersol.burnnotice.co.za/companies-3/">Companies 3</a>
                </li>
                <li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248">
                    <a href="http://powersol.burnnotice.co.za/companies-4/">Companies 4</a>
                </li>
            </ul>
        </li>
        <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">
            <a href="http://powersol.burnnotice.co.za/contact/">Contact</a>
        </li>
    </ul>
    </div>        
</nav>