Центрирование подменю ul

Question

Я работаю над этим подменю в течение 8 часов, последняя мелочь, которую я не могу вычислить, заключается в том, чтобы сделать так, чтобы центрировать элементы li (или элемент ul) в подменю , Maby это изображение помогает:

Мне нужно центрировать все предметы li под синей стрелкой. Это мой код для ul ul и ul ul li. Пожалуйста, оставьте комментарий, если вам нужна дополнительная информация, все советы и подсказки. ответы приветствуются :)

/* 
* 
* Menu 
* 
*/ 
#access { 
    display: block; 
    width: 46.4em; 
    float: right; 
    height: 7.3em; 
    line-height: 7.3em; 
    margin: 0 1.5em 0 0; 
} 
#access ul { 
    list-style: none; 
    margin: 0; 
    padding-left: 0; 
    text-align: center; 
} 
#access li { 
    float: left; 
    padding: 0 2em; 
} 
#access a { 
    position: relative; 
    height: 73px; 
    font-size: 1.4em; 
    display: block; 
    line-height: 5.071428571em; 
    font-family: Georgia, Times New Roman, serif; 
    text-transform: uppercase; 
    color: #009cda; 
} 
.current-menu-item { 
    background: url("images/arrow.png") no-repeat; 
    background-position: 50% 100%; 
} 
.current-cat-menu-item a { 
    text-decoration: underline; 
} 
ul li .current-menu-item{ 
    background: none; 
} 
.current-menu-item.parent-item a:hover { 
    background: url("images/arrow-blue.png") no-repeat; 
    background-position: 50% 229%; 
} 
#access ul ul { 
    display: none; 
    top: 100%; 
    z-index: 998; 
    position: absolute; 
    height: 36px; 
    text-align: center; 
} 
#access ul ul li{ 
    display: inline; 
    list-style: none; 
} 
#access ul ul a { 
    color: #fff; 
    font-size: 12px; 
    line-height: 3em; 
    height: auto; 
    z-index: 1000; 
    text-transform: none; 
    font-family: Arial, sans-serif; 
} 
#access li:hover > a, 
#access ul ul :hover > a { 
    text-decoration: underline; 
} 
#access .parent-item:hover > a { 
    background: url("images/arrow-blue.png") no-repeat; 
    background-position: 50% 229%; 
    z-index: 999; 
} 
#access ul ul :hover > a { 
     background: none; 
} 
#access ul li:hover > ul { 
    display: block; 
} 
.sub-menu-wrapper { 
    display: none; 
    width: 100%; 
    height: 36px; 
    top: 71px; 
    left: 0; 
    position: absolute; 
    background: url("images/blue.png") repeat-x bottom; 
    z-index: 997; 
    /* #009CDA; 
    -webkit-box-shadow: inset 0px -1px 5px 0px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: inset 0px -1px 5px 0px rgba(0, 0, 0, 0.3); 
    box-shadow: inset 0px -1px 5px 0px rgba(0, 0, 0, 0.3); */ 
} 
#access ul li:hover > span { 
    display: block; 
} 

Это мой HTML структура:

<nav class="menu-topp-meny-container"> 
    <ul id="menu-topp-meny" class="menu"> 
     <li id="menu-item-116" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116"> 
      <a href="http://test3.clydemarketing.com/om-monster-2/">Om Monster</a> 
     </li> 
     <li id="menu-item-225" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-171 current_page_item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-225 parent-item"> 
      <a href="http://test3.clydemarketing.com/entertainment/om-oss/">Avdelinger</a> 
      <ul class="sub-menu"> 
       <li id="menu-item-254" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-page-parent menu-item-254"> 
        <a href="http://test3.clydemarketing.com/entertainment/">Entertainment</a> 
       </li> 
       <li id="menu-item-260" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-260"> 
        <a href="http://test3.clydemarketing.com/entertainment/kontakt/">Kontakt</a> 
       </li> 
       <li id="menu-item-261" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-261"> 
        <a href="http://test3.clydemarketing.com/entertainment/arkiv/">Arkiv</a> 
       </li> 
       <li id="menu-item-262" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-171 current_page_item menu-item-262"> 
        <a href="http://test3.clydemarketing.com/entertainment/om-oss/">Om Oss</a> 
       </li> 
      </ul> 
     <span class="sub-menu-wrapper"></span> 
     </li> 
     <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"> 
      <a href="http://test3.clydemarketing.com/kontakt/">Kontakt</a> 
     </li> 
     <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"> 
      <a href="http://test3.clydemarketing.com/jobb/">Jobb</a> 
     </li> 
    </ul> 
</nav> 

Answer 1

Вычислить общую ширину всех li элементов, которые имеют и добавьте это в ваш ul в css:

var total = 0; 
$('li').each(function(){ 
    total += $(this).width(); 
}); 
$('ul').css({ 
    'width': total + 'px', 
    'margin': '0px auto' 
}); 

Answer 2

Попробуйте Somthing как это в CSS:

#nav_row li#menu-item li.menu-item 
{ 
padding-bottom:10px !important; 
float:none !important; 
text-align:center; 
}