Как добавить изображение в список элементов в Html?

Question

я следующий HTML-код для простого меню:

<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> 
       <a href="#">Language</a> 
       <ul class="sub-menu"> 
        <li><a href=#>Lang1</a></li> 
        <li><a href=#>Lang2</a></li> 
        <li><a href="#">Other ...</a></li> 
       </ul> 
      </li> 
      </ul> 
     </nav> 
</div> <!-- menu-wrap ends here--> 

стиль CSS для <ul> выглядит следующим образом:

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

Я пытаюсь поставить изображение флага в один из таких элементов списка:

<li style="list-style-image: url('smallflag.png');"><a href=#">Lang1</a></li> 

Но пока изображение не появляется. Есть ли конфликт с фоном? Любые предложения по его решению?

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> 
 
     <a href="#">Language</a> 
 
      <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');"><a href="#">Other ...</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     </nav> 
 
    </div>

Класс подменю скрывает его и переместите его в нижней части экрана, также картина теряется с левой: 0px собственности.

Если закомментировать верхние: 100%, слева: 0 и непрозрачность свойства, элемент будет отображаться с его изображением