Css Show On Hover For My Nav

Question

我通常没有css的问题，我自己制作了这个导航菜单，但我似乎无法理解为什么当我将鼠标悬停在一个项目上时它不会显示我的div ...我创建了一个jsfiddle @ http://jsfiddle.net/LuLTM/包含所有代码......

#beautyworld #beautyhealth {display:none;}
#beautyworld #beautyhealth:hover {color:black;display:block!important}

我想把它悬停在div #beautyworld上为div #beautyhealth出现......我只是不明白为什么我的css不工作......有人可以建议吗？谢谢

Answer 1

我认为问题在于你正试图将鼠标悬停在当前'display：none'上。由于显示没有折叠元素，因此没有任何东西可以悬停。你应该注意将它悬停在相对父级别以显示孩子。

例如：

#beautyworld > div { display:none; }
#beautyworld:hover > div { color:black; display: block !important; }