CSS Comment masquer les éléments de menu enfants en cours en survolant les éléments frères parent sans javascript

Question

J'essaie de créer un menu de navigation horizontal à deux niveaux (ou barre de menus) qui affiche les éléments du sous-menu enfant lorsque vous survolez le menu parent . Si l'un des éléments enfants est sélectionné, l'élément parent a un indicateur visuel indiquant que la page en cours correspond à l'un de ses éléments enfants et que ses éléments enfants restent affichés.

Enfant2 est la page courante:

parent1 *parent2* parent3 
      | 
    child1 *child2* child3 

Quand je passe la souris sur Parent1 ou parent3, leurs enfants sont affichés comme vous le souhaitez. Mon défi est que je ne peux pas comprendre comment cacher les enfants de parent2 quand les enfants des autres parents sont affichés. Existe-t-il un moyen CSS d'accomplir cela? Je sais que je peux utiliser jquery pour cacher les enfants de parent2 quand je sort des enfants de parent2 et parent2, mais je préfère ne pas utiliser javascript pour une utilisation maximale.

Voici un live example

CSS:

ul.AspNet-Menu 
{ 
    position: relative; 
} 

ul.AspNet-Menu, 
ul.AspNet-Menu ul 
{ 
    margin: 0; 
    padding: 0; 
    display: block; 
} 

ul.AspNet-Menu li 
{ 
    position: static; 
    list-style: none; 
    float: left; 
} 

ul.AspNet-Menu li a, 
ul.AspNet-Menu li span 
{ 
    display: block; 
    text-decoration: none; 
} 
ul.AspNet-Menu ul 
{ 
    visibility: hidden; 
    position: absolute; 
} 

ul.AspNet-Menu li:hover ul ul, 
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul 
{ 
    visibility: hidden; 
} 

ul.AspNet-Menu li:hover ul, 
ul.AspNet-Menu li li:hover ul, 
ul.AspNet-Menu li li li:hover ul, 
ul.AspNet-Menu li.AspNet-Menu-Hover ul, 
ul.AspNet-Menu li li.AspNet-Menu-Hover ul, 
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul 
{ 
    visibility: visible; 
} 

.main-nav2 .AspNet-Menu-Horizontal{ 
    margin: 0; 
    padding: 0; 
    font: bold 13px/16px Arial, sans-serif; 
    position: absolute; 
    top: 21px; 
    left: 290px; 
} 

.main-nav2 ul.AspNet-Menu li { 
    display: inline; 
} 

.main-nav2 ul.AspNet-Menu li a, 
.main-nav2 ul.AspNet-Menu li span.AspNet-Menu-NonLink { 
    color: #fff; 
    background: url(../../nav-bg.gif) no-repeat 0 -24px; 
    height: 24px; 
    text-decoration: none; 
    margin: 0 1px 0 0; 
} 

.main-nav2 ul.AspNet-Menu li a span, 
.main-nav2 ul.AspNet-Menu li span.AspNet-Menu-NonLink span { 
    background: url(../../nav-bg-right.gif) no-repeat 100% -24px; 
    padding: 4px 12px 4px 12px; 
    cursor: pointer; 
} 

.main-nav2 ul.AspNet-Menu li a:hover, 
.main-nav2 ul.AspNet-Menu li a.active { 
    background-position: 0 0; 
    color: #1b8db3; 
} 

.main-nav2 ul.AspNet-Menu li a:hover span, 
.main-nav2 ul.AspNet-Menu li a.active span { 
    background-position: 100% 0; 
} 

.main-nav2 ul.AspNet-Menu li.AspNet-Menu-Selected a, 
.main-nav2 ul.AspNet-Menu li.AspNet-Menu-ChildSelected a 
{ 
    background-position: 0 0; 
    color: #1b8db3; 
} 

.main-nav2 ul.AspNet-Menu li.AspNet-Menu-Selected a span, 
.main-nav2 ul.AspNet-Menu li.AspNet-Menu-ChildSelected a span 
{ 
    background-position: 100% 0; 
} 

.main-nav2 ul.AspNet-Menu li.AspNet-Menu-ChildSelected ul 
{ 
    visibility: visible; 
} 

.main-nav2 ul.AspNet-Menu ul{ 
    width:500px; 
} 

.main-nav2 ul.AspNet-Menu ul li { 
    font: 12px/20px Arial, sans-serif; 
    padding: 0 5px 0 0; 
    display: inline; 
} 

.main-nav2 ul.AspNet-Menu ul li a { 
    text-decoration: none; 
    color: #1b8db3; 
    padding: 0 0 0 12px; 
    background-image:none; 
} 

.main-nav2 ul.AspNet-Menu ul li a:hover { 
    text-decoration: underline; 
} 

HTML:

<div class="main-nav2" id="ctl00_MainMenu"> 
    <div class="AspNet-Menu-Horizontal"> 
     <ul class="AspNet-Menu"> 
     <li class="AspNet-Menu-Item"> 
      <a href="javascript:return false;#1"> 
      <span> A Menu Option</span></a> 
      <ul> 
      <li class="AspNet-Menu-Item"> 
       <a href="/CSSMenu/A1.aspx"> 
       A1 SubMenu Option</a> 
      </li> 
      <li class="AspNet-Menu-Item"> 
       <a href="/CSSMenu/A2.aspx"> 
       A2 SubMenu Option</a> 
      </li> 
      </ul> 
     </li> 
     <li class="AspNet-Menu-Item"> 
      <a href="javascript:return false;"> 
      <span> B Menu Option</span></a> 
      <ul> 
      <li class="AspNet-Menu-Item"> 
       <a href="/CSSMenu/B1.aspx"> 
       B1 SubMenu Option</a> 
      </li> 
      <li class="AspNet-Menu-Item"> 
       <a href="/CSSMenu/B2.aspx"> 
       B2 SubMenu Option</a> 
      </li> 
      </ul> 
     </li> 
     <li class=" AspNet-Menu-Selected"> 
      <a href="/CSSMenu/C.aspx"> 
      <span> C Menu Option</span></a> 
     </li> 
     </ul> 
    </div> 
</div> 

Un grand merci à l'avance pour tout conseil ou aider!

Terry

Answer 1

La solution simple est de tenter de se dégrader le mieux possible. Dans ce cas, je définirais une couleur d'arrière-plan dans le menu enfant et j'élèverais z-index uniquement sur hover, donc le bg couvrira les autres menus enfants - [edit] ils seront toujours visibles, mais le texte ne se chevauchera pas. Ensuite, utilisez javascript pour le faire comme vous le voulez vraiment. La solution la plus compliquée signifie que tous les menus enfants occupent un espace identique - l'une consiste à utiliser une marge négative, puis un remplissage pour masquer cet espace - et à laisser le menu enfant affiché couvrir l'espace libre. un, encore par un plus grand z-index (appliqué au parent en vol stationnaire).

modifier Une autre chose que j'utilise tout le temps pour gérer ce genre de situation est de faire quelque chose comme le

suivant

ul:hover ul { display:none; } //or in your case, set to invisible 
ul li:hover ul { display:block; } //in your case, set to visible 

Cela signifie que le sous-menu disparaît lorsque l'UL est plané au-dessus et, parce que la li: hover est plus bas dans la cascade et plus spécifique (je dois habituellement faire face à beaucoup de noms de classe ici-état - ne pense pas que vous le ferez), devrait permettre au sous-menu de réapparaître. Ce n'est pas aussi fin que vous voulez, mais presque.

Answer 2

Si ce que vous voulez est que lorsque l'utilisateur clique sur une sélection child2 la réponse produit une page avec child2 affichée, mais child2 doit disparaître lorsque l'utilisateur passe au-dessus Parent1 ou parent3, alors vous devrez utilise JavaScript. La raison en est que c'est un événement qui affecte plus d'un nœud dans le DOM de différentes manières. CSS affecte seulement 1+ nœuds dans le DOM de la même manière, et généralement seulement au chargement de la page. Les exceptions sont les pseudo-classes comme: hover qui peut affecter l'affichage après le chargement de la page.

Si vous avez besoin d'une solution multi-menu CSS, ou si vous voulez simplement en trouver une bonne qui pourrait vous aider à trouver votre réponse, consultez this GRC CSS. J'en ai beaucoup appris et je l'ai piraté dans une solution que j'ai utilisée plusieurs fois.

Answer 3

Il n'y a pas de classe pseudo dans css pour déclencher un événement équivalent mouse out. Vous devez utiliser javascript pour accomplir ce que vous essayez de faire. Il y a beaucoup de menus/plugins disponibles qui font exactement ce que vous faites (ce que je veux dire par la déclaration n'est pas nécessaire de réinventer la roue).

Answer 4

Je suis sûr que vous ne pourrez pas atteindre ce niveau de contrôle à grain fin uniquement à travers CSS. Vous devrez changer d'état sur vos éléments DOM avec JS.

Answer 5

Il est possible de faire sans javascript. Vérifiez la réponse dans cette page.

Horizontal CSS subnav issues!

Donner z-index supérieur aux frères et sœurs éléments enfants et moins z-index des éléments enfants de menu actif.