html - 将子导航居中对齐到父级

Question

如何使子导航菜单居中于父项？

对于每个导航菜单，我希望子导航菜单居中。

这是我尝试过的:JSFIDDLE

这是我的 HTML:

<ul class="nav">
    <li>
        <a href="#">Lorem Ipsum</a>
        <ul class="sub-nav">
            <li>
                <a href="#">Sub Nav 1</a>
            </li>
            <li>
                <a href="#">Sub Nav 2</a>
            </li>
            <li>
                <a href="#">Sub Nav 3</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Lorem</a>
        <ul class="sub-nav">
            <li>
                <a href="#">Sub Nav 1</a>
            </li>
            <li>
                <a href="#">Sub Nav 2</a>
            </li>
            <li>
                <a href="#">Sub Nav 3</a>
            </li>
        </ul>
    </li>
     <li>
        <a href="#">Sum</a>
            <ul class="sub-nav">
            <li>
                <a href="#">Sub Nav 1</a>
            </li>
            <li>
                <a href="#">Sub Nav 2</a>
            </li>
            <li>
                <a href="#">Sub Nav 3</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Lorem Lorem Ipsum</a>
            <ul class="sub-nav">
            <li>
                <a href="#">Sub Nav 1</a>
            </li>
            <li>
                <a href="#">Sub Nav 2</a>
            </li>
            <li>
                <a href="#">Sub Nav 3</a>
            </li>
        </ul>
    </li>
</ul>​

CSS:

.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav li {
    float: left;  
    margin: 0 10px 0 0;   
    position: relative;        
} 

.nav li:hover .sub-nav {
    display: block;
}    

.nav li .sub-nav {
    margin: 0;
    padding: 0;
    width: 120px;
    position: absolute;
    z-index: 500;
    left: 0;
    top: 32px;
    display: none;  
    background: red;    
} 

.nav li .sub-nav li {
    float: none;    
    text-align: center;    
}  

Answer 1

从子导航的中心点减去第一个导航的中心点，并将其用作子导航的左侧位置

http://jsfiddle.net/XzqS4/10/

$(".nav > li > a").hover(function(e){
    var $el = $(this),
    elc = $el.width()/2,
    $subnav = $el.parent().find('.sub-nav'),
    subc = $subnav.width()/2;

    $subnav.css({ left: -(subc-elc)+'px' });
});