Question

这是我的小提琴 http://jsfiddle.net/3mh8m/ 我的问题是，当我将鼠标悬停在“诺基亚”列表项目上时，子菜单显示有图像，但是当我离开“诺基亚”列表项并将鼠标悬停在其子菜单中的图像上时子菜单消失但不应该，有人帮助我，谢谢。

这是我的小代码，因为网站不允许我在不添加代码的情况下发布我的问题。

<body>
<div class="navigation">
<ul class="navbar">
<li class="nav_items"><a href="#">Apple</a>
        <ul class="subnavapple">                                
            <li>            
                <a href='sam.html'><img src="logo.png" width="100" height="100">
                <div class='prodinfo'>
                Samsung Galaxy S5<br>
                Price:AED 2599.00</div>
                </a>                                            
            </li>                       
        </ul>           
</li>           

<li><a href="#">HTC</a></li>
<li><a href="#">Nokia</a></li>  
</ul>
</div>

</body>

Answer 1

当subnav本身悬停在地上时，以及当悬停在导航项上时，只需包含一个样式，以便将子display更改为block：

更改以下代码：

.nav_items :hover ~.subnavapple{
    display: block;
    box-shadow: 1px 1px 3px 0px #595359;
}

到此：

.nav_items :hover ~.subnavapple, .subnavapple:hover {
    display: block;
    box-shadow: 1px 1px 3px 0px #595359;
}

Demo

通过将相同的样式应用于.subnavapple:hover，当鼠标离开由<a>选择的.nav_items :hover时，子窗口将不会隐藏。它在您的示例中消失的原因是因为您的鼠标离开了导航项，因此:hover伪类不再适用于<a>。

当它悬停在它上面时，ul会消失

1 个答案: