Question

这是我正在使用的结构。

<div id="p-menu" class="menu">
<ul>        
    <li>
        <a href="#">Top List Links</a>
    </li>        
    <li><span>Top Link List with dropdown</span> 
         <a href="#" class="linkArrow"><img src="Arrow.png"" /></a>
         <ul>                
            <li><a href="#">Horizontal Links</a></li>
        </ul>
    </li>
</ul>

我想要的是图像显示箭头图像下方的“水平链接”列表。对于我的生活，我不能让它出现在悬停。我试过使用以下css：

.linkArrow:hover ul { display:block; }

但它不会透露它。

Answer 1

您尝试显示的列表项未嵌套在锚点内，这就是您编写的CSS未显示ul的原因。

如果你想保持相同的结构，那么你可以使用兄弟选择器

.linkArrow:hover + ul {
    display: block;
}

Answer 2

您要显示的ul不是.linkArrow的后代。您可以使用同级组合子，但是~或+在这种情况下都适用。

.linkArrow:hover ~ ul { display:block; }

http://jsfiddle.net/At69f/

有问题用css显示div

2 个答案: