Равномерно Распределять элементы меню с помощью css

Question

Я бы хотел равномерно распределить первое (горизонтальное) меню этого сайта http://ipa.staging.nextdigital.com , не затрагивая выпадающее меню стиля.

HTML:

<section class="top-bar-section"> 
    <ul class="left"> 
     <li class="active has-dropdown"> 
      <a class="top-bar-l-1-anchor" href="/about-us">About Us</a> 
       <span class="mega-menu-next js-generated">next</span> 
       <ul class="dropdown" style="width: 970px;"> 
        <li class="title back js-generated"> 
        ... 
        </li> 
        <li class=""> 
         <a href="/about-us/ipa-office-locations">Office locations</a> 
        </li> 
        <li class=""> 
         <a href="/about-us/our-senior-team">Our Senior Team</a> 
        </li> 
       </ul> 
     </li> 
     <li class="has-dropdown"> 
     <li class="has-dropdown"> 
     <li class="has-dropdown"> 
     <li class="has-dropdown"> 
     <li class="quicklinks has-dropdown"> 
    </ul> 
</section> 

Я попытался с помощью дисплея: таблицы подхода/таблицы ячейки в первом списке уровня и работал хорошо однако перенесенный список второго уровня.

ul.left { 
    display:table; 
    width:100%; 
} 

ul.left li.has-dropdown { 
    display:table-cell; 
    text-align:center; 
    float:none; 
} 
ul.left li.has-dropdown li { 
    text-align:left; 
} 

Любое решение css высоко ценится.

Answer 1

Кажется, вам нужно исправить размер каждого LI (или A), как это:

ul.left li { 
    width: 150px; 
} 

выше будет влиять на следующие уровни, поэтому у вас есть 2 варианта:

(1) Использование «>» селектор CSS, вместо того, чтобы и влиять на прямые Childs только (проверить совместимость браузера этого селектора CSS):

ul.left > li { 
    width: 150px; 
} 

(2) Сброс ширины следующих уровней (после первого кода выше):

ul.left li ul li { 
    width: auto; 
} 

Сообщите мне, если мне не хватает чего-то другого.