vol stationnaire sur deux éléments mis en effet à un élément

Question

Je cet élément de liste dans mon nav, il a un menu déroulant

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

et est ici les styles

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

et je veux afficher .myDropDown lors du survol de li.projects et il est toujours affiché lors du survol de .myDropDown lui-même, et disparaît lorsque la souris n'est plus dans li.projects ou .myDropDown.

J'ai ce code jquery, mais ça ne marche pas?!

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

Answer 1

Vous devriez probablement utiliser les réponses CSS fournies. Mais si vous voulez utiliser javascript vous devriez le faire comme ceci:

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

Vous ne pouvez pas garder le top:calc(15px + 100%) si vous voulez qu'il se chevauchent. Si vous maintenez un écart entre la liste déroulante et le lien, vous le supprimez avant de l'entrer. C'est la même chose avec la solution CSS.

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

Answer 2

utilisation de cette façon

li:hover .myDropDown{dispaly:block;} 

Answer 3

Pourquoi non seulement 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: J'ai changé votre valeur supérieure et il fonctionne:

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>