How to add an image to list items in Html? - html

Question

I have the following html code for a simple menu:
<div class="wHeader">
<div class="header">
<img src="header.png">
</div><!-- header ends here -->
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li class="current-item">Home</li>
<li>
Language
<ul class="sub-menu">
<li><a href=#>Lang1</a></li>
<li><a href=#>Lang2</a></li>
<li>Other ...</li>
</ul>
</li>
</ul>
</nav>
</div> <!-- menu-wrap ends here-->
The CSS style for <ul> is as follows:
.sub-menu {
width:120%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#808080;
}
I'm trying to put a flag image in one of the list items like this:
<li style="list-style-image: url('smallflag.png');">Lang1</li>
But so far the image is not appearing. Is there any conflict with background? Any suggestions to solve this?

Answer 1

.sub-menu {
width:120%;
padding:5px 0px;
position:absolute;
/*top:100%;*/
<!--left:0px;-->
z-index:-1;
/*opacity:0;*/
transition:opacity linear 0.15s;
background:#808080;
}
<div class="wHeader">
<div class="header">
<!--<img src="header.png">-->
</div><!-- header ends here -->
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li class="current-item">Home</li>
<li>
Language
<ul class="sub-menu">
<li><a href=#>Lang1</a></li>
<li><a href=#>Lang2</a></li>
<li style="list-style-image: url('http://placehold.it/20x20');">Other ...</li>
</ul>
</li>
</ul>
</nav>
</div>
The sub-menu class is hiding it and moving it to the bottom of the screen, also the picture is lost with the left:0px property.
If you comment out the top:100%, left:0 and opacity properties, the item will show with its image