Элементы подменю центра с переменной шириной

Question

Я пытаюсь центрировать подменю под пунктом меню, но у меня, похоже, есть блокпост. Вот рабочий пример того, где я сейчас: http://jsfiddle.net/zCWXb/

Поскольку подменю имеет переменную ширину, я не могу понять, как вы поместите его в центр относительно родительского элемента меню.

HTML:

<ul class="menu"> 
    <li><a href="#">Menu Item 1</a></li> 
    <li><a href="#">Menu Item 2</a> 
     <ul class="sub-menu"> 
      <li><a href="#">Sub Item 1</a></li> 
      <li><a href="#">Sub Item Long Name Example 2</a></li> 
      <li><a href="#">Sub Item 3</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Menu Item 3</a></li> 
</ul> 

CSS:

/* 
    NAV 
*/ 
body { 
    background: #000; 
} 

.menu { 
    position: absolute; 
    left: 40px; 
    top: 20px; 
    color: #d6dcbd; 
    font-family: 'nevis', Arial, "Arial Black", "Arial Bold", Gadget, sans-serif; 
} 
.menu .sub-menu { 
    text-align: center; 
    display:none; 
    padding-top: 4px; 
    width: auto; 
    z-index: 20; 
    position: absolute; 
    left: -6px; 
} 
.menu .sub-menu li { 
    text-align: center; 
    background: #a9d6e4; 
    display: block; 
    float: none; 
    width: auto; 
    white-space: nowrap; 
    padding: 4px 6px; 
    margin-bottom: 3px; 

    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
} 

.menu .sub-menu li a { 
    color: #121212; 
    text-transform: uppercase; 
} 
.menu .sub-menu li:hover { 
    color: #FFF; 
    background: #d6dcbd; 
} 
#menu-default > li { 
    float: left; 
    position: relative; 
} 

.menu li { 
    width: auto; 
    position: relative; 
    display: block; 
    float: left; 
    padding: 0 25px 0 0; 
} 
.menu a { 
    font-family: 'nevis', Arial, "Arial Black", "Arial Bold", Gadget, sans-serif; 
    color: #d6dcbd; 
    text-decoration: none; 
} 
.menu a:hover { 
    color: #FFF; 
} 

.menu .current-menu-item a { 
    color: #FFF; 
} 

JQuery

$('.menu li').hover(
     //Mouseover, fadeIn the hidden hover class 
     function() { 
      $(this).children('.sub-menu').stop(true, true).fadeIn('1000'); 
     }, 
     //Mouseout, fadeOut the hover class 
     function() { 
      $(this).children('.sub-menu').stop(true, true).fadeOut('1000'); 
    }) 

Answer 1

$('.menu li').hover(
     //Mouseover, fadeIn the hidden hover class 
     function() { 
      var $this = $(this), 
       $subMenu = $this.children('.sub-menu') 
      $subMenu.stop(true, true).fadeIn('1000') 
      .css("left", -1*($subMenu.width()/2) + $this.width()/2)   

     }, 
     //Mouseout, fadeOut the hover class 
     function() { 
      $(this).children('.sub-menu').stop(true, true).fadeOut('1000'); 
})​; 

Работа демо - http://jsfiddle.net/zCWXb/8/

Answer 2

Try и обновить следующее правило:

.menu .sub-menu { 
    /* ... */ 
    left: -25%; 
    margin-left: -50%; 
} 

Answer 3

Я только что обновил свой jsfiddle здесь ссылка http://jsfiddle.net/zCWXb/10/

Answer 4

http://jsfiddle.net/4Xwwv/

Просто мой метод. Еще одна вещь, которую вам нужно будет рассмотреть здесь, - это то, что, если родительский элемент находится полностью слева от страницы, и есть элемент с длинным подменю с центром. Элемент будет слева от браузера.