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

Question

I have this list item in my nav , It has a dropDown menu

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

and here is the styles

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

and I want to display .myDropDown when hovering on li.projects and it still displayed when hovering on .myDropDown itself , and it disappear when the mouse became not in li.projects or .myDropDown .

I have this jquery code , but it doesn't work ?!

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

Answer 1

Why not only CSS?

 ul.myDropDown{ display: none; } li.projects:hover > ul.myDropDown{ display: block; } 

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

EDIT: I changed your top value and it works:

 li.projects { position: relative; } ul.myDropDown{ display:none; position:absolute; min-height:160px; background-color:#ffb700; top: 0px; } li.projects:hover > ul.myDropDown{ display: block; } 

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

Answer 2

You should probably use the CSS answers provided. But if you want to use javascript you should do it like this:

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

You can't keep the top:calc(15px + 100%) if you want it to overlap. If you keep a gap between the dropdown and the link you're removing it before entering it. It's the same with the CSS solution.

https://jsfiddle.net/80tbzcjh/1/

Answer 3

用这种方式

li:hover .myDropDown{dispaly:block;}