Заменить список bullet по пользовательскому символу (выравнивание по правому краю)

Question

Мне нужно создать меню, которое (при наведении) будет «всплывать» подменю, имеющее описание и список подменю уровня 2. На самом деле для теста Я не скрываю подменю.

Мой код теста:

.menu-l1>li { 
 
    display: inline-block; 
 
    padding: 0 20px; 
 
} 
 
.details { 
 
    position: absolute; 
 
    background: yellow; 
 
    margin-top: 1em;  
 
    ul { 
 
     direction: rtl; 
 
     margin-left: 0; 
 
     li { 
 
      text-align: center; 
 
      &:nth-child(odd) { 
 
       background: lightblue; 
 
      } 
 
      &:nth-child(even) { 
 
       background: lightgreen; 
 
      } 
 
     } 
 
    } 
 
}

<ul class="menu-l1"> 
 
    <li><a href="#">first menu</a> 
 
     <div class="details"> 
 
      <div>header</div> 
 
      <ul class="menu-l2"> 
 
       <li><a href="#">sub</a></li> 
 
       <li><a href="#">sub long</a></li> 
 
      </ul> 
 
     </div> 
 
    </li> 
 
    <li><a href="#">second menu</a> 
 
     <div class="details"> 
 
      <div>2 header</div> 
 
      <ul class="menu-l2"> 
 
       <li><a href="#">1 sub-menu long</a></li> 
 
       <li><a href="#">2 sub-menu</a></li> 
 
      </ul> 
 
     </div> 
 
    </li> 
 
</ul>

Это дает (при SCSS активировано) что-то вроде этого (JsFiddle here)

Это нормально, потому что мне нужно что пуля списка выравнивается по правому краю, выравнивается текстовый центр.

1. Мне нужно заменить пулю специальным символом «>»;

   1. * В идеале символ «>» должен быть «связан» с главным связующим звеном

2. мне нужно Ф.О. исправить «ошибку» второго подменю при отображении числа на право (?) (должно быть "2 подменю" вместо "подменю 2") ...

Answer 1

http://jsfiddle.net/JDERf/598/

Здесь изменяется только:

ul { 
    padding:0; 
    list-style:none; 
    li { 
     a { 
      display: block; 
      padding:0 1em 0 0; 
      position: relative; 
      &:after { 
       content:">"; 
       position: absolute; 
       right:0; 
      } 
     } 
    } 

Для этого вам не нужен rtl. Вы можете использовать: до или: после псевдоэлемента и установить для него любой символ или фоновое изображение. Лучше сделать ссылку больше с display:block и позиционировать наш псевдоэлемент относительно нее.