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

我正在制作一个下拉菜单，当您将鼠标悬停在其中一个主菜单上时，我想显示一个子菜单。所有child_menus的有0.我的HTML大致如下初始高度...如何在css中悬停在父div上时设置子div的高度？

<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中也必须有一种方法。

来源

2013-12-17 jas7457

为您的代码提供jsfiddle链接。 – Nitesh

试试这个：

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

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

.parent_menu:hover div { 
    height: auto; 
}

来源

2013-12-17 10:19:55

我喜欢你摆弄更多，然后我自己，因为我忘记设置溢出隐藏。做得好。 –

完美。正是我需要的，但不能完全弄清楚。谢谢！ – jas7457

我想你可能意思是这样的：

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

试试这个演示在这里：http://jsfiddle.net/M4NUP/

来源

2013-12-17 10:20:21

试试下面的代码它应该工作

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

来源

2013-12-17 10:20:32

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

回答

相关问题