I've encountered an issue in my html file related to a navigation bar situated at the top of my page. The code snippet that initiates this navigation bar is as follows:
<div class="“topNav">
<ul>
<li><img src="assets/map.png"> <a href="locations.html">Locations</a></li>
<li><img src="assets/length.png"> <a href="length.html">Length</a></li>
</ul>
</div>
This structure continues on with other elements.
As for my CSS efforts, I attempted the following:
.topNav img {
width: 10%;
height: auto;
}
However, it appears that the img styling is not being applied correctly due to its nested location within li and ul tags. Ideally, I'd like only the images within my topNav to have a width of 10%, without affecting other images on the page located elsewhere.