html - 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;
}

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