动态中心下拉主菜单

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>

我已经看到了一些其他的例子,但尝试了一些,没有一个以中心为中心.我想找到一种动态方法,无论菜单中链接的位置如何,它总是将菜单集中在容器中.

编辑:小提琴在这里找到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