以可变宽度居中子菜单项答案

【问题标题】：Center submenu items with a variable width以可变宽度居中子菜单项
【发布时间】：2014-04-12 07:26:29
【问题描述】：

我试图将菜单项下的子菜单居中，但我似乎遇到了障碍。这是我现在所处位置的一个工作示例：http://jsfiddle.net/zCWXb/

由于子菜单的宽度可变，我似乎无法理解您如何将其放置在相对于父菜单项的中心。

HTML：

<ul class="menu">
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a>
        <ul class="sub-menu">
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item Long Name Example 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
        </ul>
    </li>
    <li><a href="#">Menu Item 3</a></li>
</ul>

CSS：

/*
    NAV
*/
body {
    background: #000;
}

.menu {
    position: absolute;
    left: 40px;
    top: 20px;
    color: #d6dcbd;
    font-family: 'nevis', Arial, "Arial Black", "Arial Bold", Gadget, sans-serif;
}
.menu .sub-menu {
    text-align: center;
    display:none;
    padding-top: 4px;
    width: auto;
    z-index: 20;
    position: absolute;
    left: -6px;
}
.menu .sub-menu li {
    text-align: center;
    background: #a9d6e4;
    display: block;
    float: none;
    width: auto;
    white-space: nowrap;
    padding: 4px 6px;
    margin-bottom: 3px;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.menu .sub-menu li a {
    color: #121212;
    text-transform: uppercase;
}
.menu .sub-menu li:hover {
    color: #FFF;
    background: #d6dcbd;
}
#menu-default > li {
    float: left;
    position: relative;
}

.menu li {
    width: auto;
    position: relative;
    display: block;
    float: left;
    padding: 0 25px 0 0;
}
.menu a {
    font-family: 'nevis', Arial, "Arial Black", "Arial Bold", Gadget, sans-serif;
    color: #d6dcbd;
    text-decoration: none;
}
.menu a:hover {
    color: #FFF;
}

.menu .current-menu-item a {
    color: #FFF;
}

jQuery

$('.menu li').hover(
        //Mouseover, fadeIn the hidden hover class 
        function() {
            $(this).children('.sub-menu').stop(true, true).fadeIn('1000');   
        },
        //Mouseout, fadeOut the hover class
        function() {
            $(this).children('.sub-menu').stop(true, true).fadeOut('1000');  
    })

【问题讨论】：

标签： jquery html css wordpress

【解决方案1】：

$('.menu li').hover(
        //Mouseover, fadeIn the hidden hover class 
        function() {
            var $this = $(this),
                $subMenu = $this.children('.sub-menu')
            $subMenu.stop(true, true).fadeIn('1000')
            .css("left", -1*($subMenu.width()/2) + $this.width()/2)         

        },
        //Mouseout, fadeOut the hover class
        function() {
            $(this).children('.sub-menu').stop(true, true).fadeOut('1000');  
});

工作演示 - http://jsfiddle.net/zCWXb/8/

【讨论】：

我最终使用了你的。太感谢了。有道理。

【解决方案2】：

我刚刚更新了你的 jsfiddle 这里是链接http://jsfiddle.net/zCWXb/10/

【讨论】：

【解决方案3】：

http://jsfiddle.net/4Xwwv/

只是我的方法。在这里您需要考虑的另一件事是，如果父元素一直位于页面左侧并且有一个居中的长子菜单元素，该怎么办。该元素将离开浏览器的左侧。

【讨论】：

【解决方案4】：

尝试更新以下规则：

.menu .sub-menu {
    /* ... */
    left: -25%;
    margin-left: -50%;
}

【讨论】：