中心對齊子導航至父

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

從subnav的中心點減去你的第一個資產淨值的中心點，並使用它作爲您的左邊位置上subnav

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

嘗試增加 「寬度：120像素;」到.nav李.SUB-NAV李

Answer 3

可以做這種方式使用jQuery

var subNavWidth=120; 

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

DEMO http://jsfiddle.net/XzqS4/9/

Answer 4

你可以做到這一點沒有JS/jQuery的，如果子菜單有固定寬度，試試這個小提琴如果你把子NAV 50％左，李-60px（寬/ 2）左http://jsfiddle.net/XzqS4/13/

（和其他更改，如背景顏色和寬度）

.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; 
}