html - 如何在 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;
}