Как нажать изображение справа от каждого пункта меню блока

Question

У меня есть следующие: http://jsfiddle.net/86wj0qem/

код следующим образом:

HTML

<div id="subnav"> 
    <ul class="nav"> 
     <li> 
      <a href="#">Top menu thing useful</a> 
     </li> 
     <li> 
      <a href="#">Second entry in the menu</a> 
     </li> 
     <li> 
      <a href="#">Entry number 3</a> 
     </li> 
     <li> 
      <a href="#">Menu 4 has sub menu!</a> 
      <ul> 
       <li> 
        <a href="#">As promised, menu 4.1</a> 
       </li> 
       <li> 
        <a href="#">The last menu option is 4.2</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

CSS

* { 
    line-height: 20px; 
    border: 0; 
    padding: 0; 
    margin: 0; 
} 
a { 
    text-decoration: none; 
} 
ul, li { 
    list-style-type: none; 
} 
#subnav { 
    float: left; 
    width: 220px; 
    height: 100%; 
} 
#subnav .nav { 
    width: 215px; 
    font-size: 70%; 
    position: relative; 
} 
#subnav .nav li { 
    width: 210px; 
    height: 25px; 
    margin: 2PX 0PX 2PX !important; 
    background-color: #CECECE; 
    text-align: left; 
    text-transform: uppercase; 
    vertical-align: middle; 
    padding: 3px 0px; 
} 
#subnav .nav li a { 
    font-weight: bold; 
    padding-left: 10px; 
    line-height: 26px; 
    display: block; 
    color: #000; 
} 
#subnav .nav li ul { 
    margin-top: 4px; 
} 
#subnav .nav li ul li { 
    background-color: #EBEBEB; 
} 
#subnav .nav li:after { 
    float: right; 
    text-align: right; 
    margin-top: 10px; 
    content: url("http://s10.postimg.org/eh8ghojkl/arrowg.png"); 
    margin-right: 5px; 
} 

Проблема, как подчеркивается скрипкой, заключается в том, что изображения не нажимают на правую сторону каждого элемента LI в этом конкретном список. Я хочу, чтобы он работал независимо от того, какой текст там, и не хочу, чтобы он повторялся, если пункт меню переходит на 1 строку.

Я не могу изменить html по мере его создания. Я также попытался использовать абсолютную позицию с правом: 0 и получил тот же результат. Есть идеи?

Answer 1

Вашего CSS определяет изображение, чтобы быть после li который я думаю, должен быть после a внутри li. Я изменил это и адаптировал поля. Вот обновленный код:

#subnav .nav li a:after { 
    float: right; 
    text-align: right; 
    margin-top: 3px; 
    content: url("http://s10.postimg.org/eh8ghojkl/arrowg.png"); 
    margin-right: 5px; 
} 

См. jsfiddle demo.

Answer 2

#subnav .nav li { 
width: 210px; 
height: 25px; 
margin: 2PX 0PX 2PX !important; 
background-color: #CECECE; 
text-align: left; 
text-transform: uppercase; 
vertical-align: middle; 
padding: 3px 0px; 
position: relative; 
} 
#subnav .nav li:after { 
/* float: right; */ 
position: absolute; 
top: 0; 
right: 0; 
margin-top: 7px; 
content: url("http://s10.postimg.org/eh8ghojkl/arrowg.png"); 
margin-right: 5px; 
} 

Fiddle: http://jsfiddle.net/xr1ar5z9/

Если вы хотите, чтобы я это объяснить, я просто использовал position:absolute для стрел, и position:relative для элементов списка, поэтому <li> элемент правильно содержит абсолютный расположенный стрелка. Если бы эта проблема много много раз, и это лучший способ я использую, чтобы решить :)