li:hover doesn't get triggered

li:hover doesn't get triggered

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?