使用css在parent下面居中水平子菜单 [英] Centering horizontal submenu below parent with css

问题描述

使用小提琴最佳显示： http://jsfiddle.net/Jnttm/

Best shown with a Fiddle: http://jsfiddle.net/Jnttm/

如何获取子菜单居中在父菜单项下？很多我发现的中心技巧不适用，因为子元素比父元素宽。

How can I get the sub-menu to center underneath the parent menu-item? A lot of the centering tricks I've found don't apply because the child element is wider than the parent.

这是可能与纯CSS还是我必须诉诸于javascript？

如果需要JS，任何人都有JQuery代码方便这样做？

Is this possible with pure CSS or do I have to resort to javascript?
If JS is required does anyone have JQuery code handy for doing this?

推荐答案

可能是你必须为自己定义一个默认的 width 子菜单如下：

May be you have to define a default width to your submenu like this :

.sub-menu {
    display: none;
    position: absolute;
    top: 20px;
    left: 0;
    white-space: nowrap;
    text-align:center;
    left:50%;
    margin-left:-150px;
    width:300px;
}
.active .sub-menu {
    display:block;
}

检查此http://jsfiddle.net/sandeep/Jnttm/1/

这篇关于使用css在parent下面居中水平子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！