CSS: горизонтальный выпуск списка позиционирование только с 2-х или более элементов LI

Question

Я пытаюсь создать горизонтальный список, что-то вроде этого

<nav class="tabs"> 
    <ul> 
     <li class="active"> 
      <a>Bar Foo</a> 
     </li> 
     <li> 
      <a>Foo Bar</a>   
     </li> 
    </ul> 
</nav> 

Проблема в том, что только с 1 Li элемент работает (как this), но с 2 первый элемент li расположен неправильно (например, this)

Может кто-нибудь объяснить мне, что происходит?

ОБНОВЛЕНИЕ: удалить тип с активным классом на якоре!

Answer 1

Нет необходимости использовать абсолютное позиционирование. Просто сделайте следующим образом:

li.active a { 
    color: #abc522; 
    padding: 20px 40px 13px; 
    width: 146px; 
    background-color: white; 
} 

fiddle

Answer 2

Удалите класс из первого тега элемента списка.

<nav class="tabs"> 
    <ul> 
     <li> <-- Here 
      <a class="active">Bar Foo</a> 
     </li> 
     <li> 
      <a class="active">Foo Bar</a>   
     </li> 
    </ul> 
</nav> 

ИЛИ

<nav class="tabs"> 
    <ul> 
     <li class="active"> 
      <a>Bar Foo</a> 
     </li> 
     <li class="active"> 
      <a>Foo Bar</a>   
     </li> 
    </ul> 
</nav>