html - Div 未出现在 TOP : CSS

Question

我想做一个下拉登录菜单，但是我遇到了问题请帮我解决。我的登录框没有出现在其他层的顶部。即使在应用 z-index:999 之后；请帮忙。

我的 HTML 代码在这里

<nav id="menu">
    <ul id="floatright" style="">
        <li>
        <a href="login.php">Sign in</a>
           <div id="loginbox">
              <table>
              <tr>
                 <td>Username </td><td><input type="text"></td>
              </tr>
                  <tr>
                 <td>Username </td><td><input type="text"></td>
              </tr>
              </table>
           </div>
        </li>
        <li>
            -
        </li>
        <li>
               <a href="signup.php">Join us</a>
        </li>
    </ul>
</nav>

这是CSS

#menu {
    height: 15px;
    width: 900px;
    background: #9a255a;
    float: left;
    padding: 10px 40px;
    overflow: hidden;
    color: #fff;
    border-bottom: 1px solid #c53275;
}
#menu ul {
    margin: 0px;
    position: relative;
    padding: 0px;
    list-style: none;
}
#menu ul li {
    float: left;
    padding: 0px 10px;
    display: block;
    line-height: 17px;
}
#loginbox {
    display: block;
    position: absolute;
    top: 5px;
    right: 0;
    z-index: 999;
}

Answer 1

只需增加#menu的高度