html - How to set the CSS of an img inside a li inside a ul inside a class? -

in html file, have navigation bar @ top of page start starts off this:

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

and on.

and in css tried

.topnav img {   width: 10%;   height: auto; } 

except img far deep (inside li tag inside ul tag) noticed or something. want topnav's images 10%, not images on page. have other images in lower part of page, , have other style plans them.

the problem html, have “ here

<div class="“topnav"> 

js fiddle

.topnav img {    border:2px green solid;  }

<div class="topnav">    <ul>      <li><img src="//placehold.it/100x50?text=img-1"> <a href="locations.html">locations</a></li>      <li><img src="//placehold.it/100x50?text=img-2"> <a href="length.html">length</a></li>      <li><img src="//placehold.it/100x50?text=img-3"> <a href="locations.html">locations</a></li>      <li><img src="//placehold.it/100x50?text=img-4"> <a href="length.html">length</a></li></ul>  </div>