如何在css中悬停在父div上时设置子div的高度？

Question

我正在创建一个下拉菜单，当您将鼠标悬停在其中一个主菜单上时，我想显示一个子菜单。所有child_menus的初始高度均为0.我的HTML大致如下......

<div class = "parent_menu">Parent 1
    <a href = "link"><div class = "child_menu">Child 1 text</div></a>
    <a href = "link"><div class = "child_menu">Child 2 text</div></a>
</div>

<div class = "parent_menu">Parent 2
    <a href = "link"><div class = "child_menu">Child 1 text</div></a>
    <a href = "link"><div class = "child_menu">Child 2 text</div></a>
</div>

我知道您可以使用:hover选择器设置属性，但我可以执行类似.parent_menu:hover THEN FIND .child_menu {height:auto;}

的操作

顺便说一下，我知道我可以在JavaScript中实现它，但是在CSS中也必须有一种方法。

Answer 1

试试这个：

http://jsfiddle.net/r83FD/1/

.parent_menu div {    
    height: 0;
    overflow: hidden;
}

.parent_menu:hover div {
    height: auto;
}

Answer 2

我想你可能会这样：

.parent_menu:hover .child_menu {
  height: auto;
}

在此尝试演示：http://jsfiddle.net/M4NUP/

Answer 3

尝试下面应该运行的代码

.parent_menu:hover a.child_menu{
  height:auto;
}