CSS悬停在云导航中不起作用

这是我第一次以这种方式使用CSS悬停。但它不起作用。CSS悬停在云导航中不起作用

我想在用户在导航中悬停项目时显示导航云。

这是我目前的CSS

.menuBox li a:hover,.menuBox li.selected a { color: #fff; background-color: #068dda; } 

.menuBox .cloudnav { display: none; position: absolute; width: 995px; height: 500px; background-color: #fff; z-index: 999999; border: 1px solid #4a4d4b;} 

.menuBox li a:hover>.cloudnav { display: block; }

这是我当前的HTML

<nav class="menuBox"> 
<ul> 
    <li><a href="">Item 1</a></li> 
    <li><a href="">Item 2</a></li> 
    <li><a href="">Item 3</a></li> 
</ul> 
<div class="cloudnav">test</div> 
</nav>

我还送的jsfiddle为你们：http://jsfiddle.net/tAgEj/

我也试过.menuBox li a:hover + .cloudnav { display: block; }但没”不管工作。

什么？

来源

2013-09-25 AgeDeO

[**是这**]（http://jsfiddle.net/tAgEj/1/）你想要什么？它不是'li'的兄弟，所以你可以将它应用到'ul' –

它不适用于a：hover。但在新的浏览器就可以工作了这样

.menuBox ul:hover + .cloudnav { display: block; }

但这只会在新的浏览器，因为许多IE的不支持悬停超过<a>

.menuBox li a:hover>.cloudnav { display: block; }这是不行的别的东西因为div.cloudnav不是a元素的直接子元素。这将工作，如果它会

<a href="#">something<div class="cloudnav"></div></a>

来源

2013-09-25 14:15:23

CSS悬停在云导航中不起作用

回答

相关问题