jquery - 将鼠标悬停在两个元素上可将效果设置为一个元素

我的导航中有这个列表项，它有一个下拉菜单

 <li class="projects">
      <a href="#">Projects</a>
      <i class="fa fa-angle-down" aria-hidden="true"></i>
      <ul class="list-unstyled myDropDown">
             <li><a href="#">King SALEH Bridge</a></li>
             <li><a href="#">Internationl future schools</a></li>
             <li><a href="#">Elwakeel Companies Group</a></li>
      </ul>
 </li>

这是款式

nav .myDropDown{
    display:none;
    position:absolute;
    min-height:160px;
    background-color:#ffb700;
    top:calc(15px + 100%)
}

我想在li.projects上显示.myDropDown，在li.projects或.myDropDown上显示.myDropDown，当鼠标不在li.projects或.myDropDown中时它会消失。
我有这个jquery代码，但它不起作用？!

 $("nav .projects").hover(function(){
     $("nav .myDropDown").css("display","block");
 });
 $("nav .myDropDown").hover(function(){
           $(this).css("display","block");
  },function(){
           $(this).css("display","none");
 });

最佳答案

您可能应该使用提供的CSS答案。但是如果你想使用javascript，你应该这样做：

 $("nav .projects").hover(function(){
    $(this).find(".myDropDown").css("display","block");
 }, function(){
     $(this).find(".myDropDown").css("display","none");
 });

如果要重叠，就不能保留top:calc(15px + 100%)。如果在下拉列表和链接之间留有间隙，则在进入前将其删除。CSS解决方案也是如此。
https://jsfiddle.net/80tbzcjh/1/