jQuery下拉菜单问题，在菜单链接上放置箭头，但当箭头悬停时菜单消失

Question

我已经使用 jQuery 在我的网站上实现了一个下拉菜单，它运行良好，但我想在具有子菜单的链接上放置一个箭头。问题是，一旦您将鼠标悬停在所述箭头上，因为您“技术上”不再悬停在下拉元素上，下拉菜单就会消失并再次出现。我该如何解决这个问题？

HTML：

<nav id="site-navigation" class="main-navigation top-bar" data-topbar role="navigation" style="float:right;" data-topbar>
 <section class="top-bar-section">
  <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
 </section>
  <div class="arrow-left-1"></div>
  <div class="arrow-left-2"></div>
  <div class="arrow-left-3"></div>
  <div class="arrow-left-4"></div>
  <div class="arrow-left-5"></div>
</nav>

CSS：

.arrow-left-1, .arrow-left-2, .arrow-left-3, .arrow-left-4, .arrow-left-5 {
  width: 0; 
  height: 0; 
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #95020a;
  position: absolute;
  display: none;
  z-index: 900;
}

.arrow-left-1 {
  left: 58%;
  top: 138%;
}

jQuery:

$('#menu-item-1837' ).hover(
    function(){
        $(this).children('.sub-menu').fadeIn('medium');
        $('.arrow-left-1').show();
        $('.arrow-left-2').show();
        $('.arrow-left-3').show();
        $('.arrow-left-4').show();
        $('.arrow-left-5').show();
    },
    function(){
        $(this).children('.sub-menu').fadeOut('medium');
        $('.arrow-left-1').hide();
        $('.arrow-left-2').hide();
        $('.arrow-left-3').hide();
        $('.arrow-left-4').hide();
        $('.arrow-left-5').hide();
    }
);

Answer 1

您可以使用 :after 或 :before 选择器将箭头添加为“内容”，而不是为每个箭头创建一个新的 div。

http://www.w3schools.com/cssref/sel_after.asp

编辑：根据您使用 WordPress 的代码 - 因此无需添加 Javascript/jQuery 即可将元素添加到您的子菜单。

查看 WordPress 创建的代码并使用提供的元素添加 CSS 箭头。

ul.sub-menu li.menu-item-has-children:after {
content:'>';
color:#fff;
}

这只是一个小示例，但可以使用它来自定义您的元素。 希望这会有所帮助

Answer 2

删除硬编码的箭头并将:after 伪元素添加到您的类menu-item-has-children。

您可以相应地设置箭头的样式。

.menu-item-has-children::after { 
    content: "";    
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #95020a;
    float: right;
}

要选择悬停的类，请像这样选择：

.menu-item-has-children:hover::after {
    border-left-color: white;
}

您可以看到一个小的工作示例here。

Answer 3

我认为您已经找到了问题的解决方案，因为它似乎在您的网站上运行良好。如果没有，请告诉我们。