How change CSS properties for element child

For the given exam开发者_高级运维ple:

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

How can I change the display property for the respective childs elements?

I was trying the solution:

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

But all the "sub_menu" are shown when the mouse is over any "menu_top".

You want to display the .sub_menu when hovering over .menu_top?

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

The selector should be .menu_top:hover if you only want to display the respective child .sub_menu on hover.

See it in action - http://jsfiddle.net/spBJH/

You just need a minor change i think.

You have .menu:hover instead of .menu_top:hover

try this instead:

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

Try:

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

5.6 Child selectors

A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">".

The following rule sets the style of all P elements that are children of BODY:

body > P { line-height: 1.3 }

The following example combines descendant selectors and child selectors:

div ol>li p

It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the ">" combinator has been left out.

You've got them switched.

.menu:hover = { do something when I hover over .menu }

I think what you want is:

.sub_menu:hover { this }