Question

For the given example:

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

Answer 1

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

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