propriétés CSS changement pour enfant élément

Question

Pour l'exemple donné:

<div class="menu"> 
    <div class="menu_top">Menu1<div class="sub_menu">SubMenu1</div></div> 
    <div class="menu_top">Menu2<div class="sub_menu">SubMenu2</div></div> 
    <div class="menu_top">Menu3<div class="sub_menu">SubMenu3</div></div> 
</div> 

Comment puis-je changer la propriété d'affichage pour les éléments Childs respectifs?

je tentais la solution:

.menu_top .sub_menu{ 
    display: none; 
} 
.menu_top:hover div.sub_menu{ 
    display: block; 
} 

Mais tous les "sub_menu" apparaissent lorsque la souris est sur une "menu_top".

Answer 1

Vous voulez afficher le .sub_menu lors du survol de .menu_top?

.menu .menu_top:hover .sub_menu { 
    display: block; 
} 

Answer 2

Vous les avez commutés.

.menu: vol stationnaire = {faire quelque chose quand je passe la souris sur .menu}

Je pense que ce que vous voulez est:

.sub_menu:hover { this }

Answer 3

Vous avez juste besoin d'un changement mineur, je pense.

Vous avez .menu:hover au lieu de .menu_top:hover

essayer ceci:

.menu .sub_menu{ 
    display: none; 
} 
.menu_top:hover div.sub_menu{ 
    display: block; 
} 

Answer 4

Essayez:

.menu_top:hover div.sub_menu { 
    display:block; 
} 

Answer 5

Le sélecteur doit être .menu_top:hover si vous voulez seulement afficher l'enfant respectif .sub_menu sur le vol stationnaire.

Voir en action - http://jsfiddle.net/spBJH/

Answer 6

5.6 Child selectors

Un matchs de sélection de l'enfant lorsqu'un élément est l'enfant d'un élément. Un sélecteur d'enfant est composé de deux sélecteurs ou plus séparés par ">".

La règle suivante définit le style de tous les éléments P qui sont des enfants de CORPS:

body > P { line-height: 1.3 } 

L'exemple suivant combine les sélecteurs descendants et sélecteurs de l'enfant:

div ol>li p 

Il correspond à un élément P qui est un descendant d'un LI; l'élément LI doit être l'enfant d'un élément OL; l'élément OL doit être un descendant d'un DIV. Notez que l'espace blanc optionnel autour du combinateur ">" a été omis.