li：hover没有被触发

Question

我很久没有这样做了，我也一直在查看它，但是当我将鼠标悬停在li上时，我希望它的孩子UL打开（显示），但它不是：

<nav>
    <ul>
        <li><a href="#">Products&nbsp;<img src="~/Shared/Assets/Images/LIItemArrow.png" /></a>
            <ul>
                <li>Hi</li>
            </ul>
        </li>
        <li><a href="#">Services&nbsp;<img src="~/Shared/Assets/Images/LIItemArrow.png" /></a></li>
        <li><a href="#">Shop&nbsp;<img src="~/Shared/Assets/Images/LIItemArrow.png" /></a></li>
    </ul>
</nav>

CSS：

ul li ul { display: none; }

ul li:hover > ul {
    display: block;
}

根据我查阅的几篇文章，我相信我这样做是对的，为什么这不起作用呢？

Answer 1

添加高度：自动，因此您的代码将变为

ul li ul { display: none; }

ul li:hover > ul {
    display: block;
   height: auto;
}

我在创建菜单时遇到了类似的问题。