html - 李 :hover doesn't get triggered

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

添加 height: auto，这样你的代码就变成了

ul li ul { display: none; }

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

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