javascript - 主菜单动态居中下拉

Question

我想让 class="children" 最好只使用 css 居中在页面容器的中间，但如果不可能，你可以提供最好的 js 答案。目前它只是一个普通的下拉菜单，但我想将它用作一个大型菜单。如果我必须添加另一个 div 结构也没关系。

<div class="main-navigation-wrapper">
    <div class="nav pull-left">
        <div class="menu-main-menu-container">
            <ul id="menu" class="menu no-dropdown">
                <li class="menu-item">
                    <a href="#">Blog</a>
                    <div class="children">
                        --- Children items are here
                    </div>
                 </li>
             </ul>
         </div>
    </div>
</div>

我看过其他一些示例，但尝试了一些，但没有一个将其居中。我想找到一种动态方法，无论链接在菜单中的位置如何，它始终将菜单置于容器的中心。

编辑:在这里找到 fiddle http://jsfiddle.net/YzJ4h/

Answer 1

最简单的方法是添加此 CSS 以水平居中您的大型菜单项:

CSS:

#menu li, .second-menu li {
    display:inline-block;
    position:relative;
}
#menu > li.mega_width {
    display:inline-block;
    position:static;
}
#menu > li.mega_width > .children {
    position:absolute;
    left:0;
    right:0;
    top:auto;
    margin:auto;
}

DEMO