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;
}