html - 带有 z-index 的菜单下的子菜单

Question

我有这个菜单:http://jsfiddle.net/gywcv/

我试图将“测试”子菜单放在粉红色栏下，但没有找到解决方案。

我测试了position:relative, position:absolute 等:

header .container-fluid nav ul li div.submenu {
    height: auto;
    min-height:45px;
    border-width: 1px;
    border-color: rgb( 205, 205, 205 );
    border-style: solid;
    background-color: rgb( 255, 255, 255 );
    box-shadow: 0px 0px 5px 0px rgb( 0, 0, 0 );
    margin-top: 12px;
    position:relative;
    z-index:1;
}

Answer 1

请参阅此 fiddle :http://jsfiddle.net/bradleytrager/k8CfZ/

您必须使“测试”子菜单的位置相对，然后为顶部设置一个值:

header .container-fluid nav ul li div.submenu{
    /*display:none;*/
    height: auto;
    min-height:45px;
    border-width: 1px;
    border-color: rgb( 205, 205, 205 );
    border-style: solid;
    background-color: rgb( 255, 255, 255 );
    box-shadow: 0px 0px 5px 0px rgb( 0, 0, 0 );
    margin-top: 12px;
    color:#000000;
    position:relative;
    top:10px;
}