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' });
});

Answer 2

JQueryでこのようにすることができます

var subNavWidth=120;

$('.sub-nav').each(function(){
   var parentW=$(this).parent().width()
   var left= (parentW-subNavWidth)/2;
   $(this).css('left', left);       
});

デモhttp://jsfiddle.net/XzqS4/9/

Answer 3

サブメニューの幅が固定されている場合は、js/jquery なしでこれを行うことができます。このフィドルhttp://jsfiddle.net/XzqS4/13/を試してください。

サブナビゲーションを左に 50% 配置し、li -60px (幅/2) を左に配置した場合 (および背景色や幅などのその他の変更)

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

.nav li .sub-nav li {
    float: none;    
    text-align: center;
    width: 120px;
    background: red;
    margin-left: -60px;
}

Answer 4

「幅:120px;」を追加してみてください。.nav へ .sub-nav へ