CSS block 元素问题

Question

我想在我的应用程序中做一个下拉菜单栏。我想让我的菜单栏看起来像

 __________________
|                  |
|__________________|
     |_____________|
     |_____________|
     |_____________|

但是在我设置了 html 样式之后，结果是

__________________
|    ______________|
|___|______________|
    |______________|
    |______________|

子菜单在我的主菜单按钮内。

我的html如下

<nav>

        <ul id='menu'>
            <li id=browser ><a href=#>test</a>
                <ul>
                    <li><?= anchor('#','1');?></li>
                    <li><?= anchor('#','2');?></li>
                    <li><?= anchor('#','3');?></li>
                </ul>
            </li>

            <li id=user_management><a href=#></a></li>
            <li id=log_out><a href=#> </a></li>
        </ul>

    </nav>

和我的CSS

nav > ul{
        list-style:none;
        width: 816px;
        margin: 0 auto;
    }

    nav > ul #browser{      my main menu button
            border:2px solid red; 
            width:270px;
            height:32px;
            display:block;
            float:left;
            margin-right:2px;
            background-image:url('../images/browser_BT.jpg');
    }

    #browser li{       //my submenu
    border:2px solid red;
    list-style:none;
    text-align:left;
    display:block;

    }

我的子菜单似乎忽略了我的主菜单按钮的 block 元素。有什么帮助吗？太感谢了。

Answer 1

绝对定位你的子菜单，像这样:

#browser ul {       //my submenu
    position:absolute;
    top:100%;
    left:0;
}