li：悬停不会被触发

Question

I haven't done this in a long time and I looked it up aswell but when I hover over an li I expect its child UL to open up (display), but it isn't:

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

According to the several articles I looked up, I believe that I'm doing this right, so why won't this work?

Answer 1

Add height: auto, so your code would become

ul li ul { display: none; }

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

I had similar problems while I was creating menu.