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

DEMO 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

尝试添加“width：120px;”到.nav li .sub-nav li

中心将子导航与父级对齐

4 个答案: