I want to make a dropdown login menu, but i got a problem please help me resolve it. My Login box is not appearing on the top of other layers. even after applying z-index:999; please help.
MY HTML CODE IS HERE
<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>
Here is the 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;
}