Dropdown list displays elements behind it in IE9 and FF

I'm writing a dropdown navigation for my page using an unordered list, but the list items display the elements behind them.

See how the hr displays through the submenu? That's what I don't want.

I've tried fuddling with the z-index for all the elements involved, and assigning background colors, but that doesn't seem to work. I feel like I'm missing a simple solution.

Related Html

    <ul id="menu" class="topNavListLeft">
        <li class="headlink">@Html.ActionLink("Home", "Index", "Home")
            <ul>
            <li>@Html.ActionLink("Home", "Index", "Home")</li>
            <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
        </li>

        <li class="headlink">@Html.ActionLink("About", "About", "Home")
            <ul>
            <li>@Html.ActionLink("About", "About", "Home")</li>
            <li>@Html.ActionLink("Home", "Index", "Home")</li>
            </ul>
        </li>
    </ul>
</div>
<div>
<br />
<hr style="position:relative; top:-25px; color:Gray; background-color:Gray; height:3px" />
</div>

Edit: Here's a few sections of my CSS too.

.nav a:active, .nav a:hover {
    color:#1ba1e2;
}
ul.topNavListLeft {
    white-space:nowrap;
    padding-top:50px;
    min-height:35px;
    width:100%;
}
.topNavListLeft > li {
    float:left;
    font-size:18px;
    padding-right:50px;
    height:35px;
    display:block;
}
.topNavListLeft div 
{
    float:left;
    white-space:nowrap;  
    padding-right:60px; 
}
.topNavListLeft li ul
{
    display:none;
    z-index:20;
}
.topNavListLeft a {
    display:block;
    z-index:20;
}
.topNavListLeft a:hover, .topNavListLeft li.current a {
    border-bottom:solid 6px #1ba1e2;        
}
.topNavListLeft li:hover ul
{
    display:block;
}
ul {
    list-style: no开发者_JS百科ne;
}
.content {
    text-align:left;
    width:903px;
    margin:0px 40px 0px 40px;
}
.body {
    margin:0px auto;
    width:981px;
    text-align:center;
    background-color:#fff;
    color: #666666;
    min-height:101%;
    position:relative;
    font-size:14px;
    font-family:'Segoe UI',arial,helvetica;
}
a {
    text-decoration:none;
    color:Gray;
}
a:link, a:hover {
    color:#1ba1e2;
}

---

I think what you need it this:

.headlink{
position:relative;
}
.headlink ul{
position:absolute;
display:block;
left:0;
top:25px /*You'll need to play with this number*/
}

---

Try this: Looking for a Menu System like Bonobos.com