0

如何将子导航菜单居中到父项？

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

这是我尝试过的：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;    
}
4

4 回答 4

4

从 subnav 的中心点减去第一个 nav 的中心点，并将其用作 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' });
});
于 2012-11-14T22:47:31.767 回答
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/

于 2012-11-14T22:44:30.800 回答
1

如果子菜单具有固定宽度，您可以在没有 js/jquery 的情况下执行此操作，试试这个小提琴http://jsfiddle.net/XzqS4/13/

如果您将 sub-nav 50% 放在左侧，将 li -60px (width/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;
}
于 2012-11-14T23:22:22.593 回答
0

尝试添加“宽度：120px；” to .nav li .sub-nav li

于 2012-11-14T22:28:22.277 回答