CSS Drop Down DIV Menu...why do my links break it?

Question

Okay so I'm building a CSS drop down menu similar to that on ESPN's site. Everything is going great but when I put a link into the dropdown div it breaks. In firefox the dropdown div will now longer appear, and in explorer it will appear but all elements of the list with the link in it disappear. Any ideas/suggestions?

Btw I'm new here...been looking up fixes on stackoverflow forever but never actually had to ask a question myself until now. Thanks in advance!

Here's the HTML, notice the one link in the list. Withought any links in the subnav div everything works perfect. With the link it breaks.

    <ul id="topnav">
    <li><a class="top" href="#">
        <div class="button">Home</div>
        </a>
    </li>
    <li><a class="top" href="#">
        <div class="button">Programs</div>
        <div class="subnav">
            <ul class="mainlinks">
                <li><a href="#">Recreational</a></li>
                <li>TESTING</li>
                <li>TESTING</li>
                <li>TESTING</li>
                <li>TESTING</li>
            </ul>
        </div>
        </a>
    </li>
</ul>

And here's the CSS:

#topnav {
width: 800px; height: 30px;
margin: 0 auto; padding: 0 0 0 160px;
list-style: none;
}
#topnav li {
position: relative;
}
#topnav li a.top {
color: #FFFFFF;
font-size: 0.75em;
font-weight: bold;
text-decoration: none;
}
#topnav li a.top .button {
position: relative;
z-index: 998;
display: inline;
float: left;
height: 18px;
padding: 6px 30px;
}
#topnav li a.top:hover {}
#topnav li a.top:hover .button {
color: #000000;
background-color: #FFFFFF;
-moz-box-shadow: 0 0 10px -1px #000000;
-webkit-box-shadow: 0 0 10px -1px #000000;
box-shadow: 0 0 10px -1px #000000;
}
#topnav li .subnav {
display: none;
position: absolute;
z-index: 999;
width: 960px;
top: 30px; left: -160px;
background-color: #FFFFFF;
color: #000000;
border-bottom: solid 5px #990000;
}
#topnav li a.top:hover .subnav {
display: block;
}
#topnav li .subnav ul.mainlinks {
width: 150px;
list-style: none;
padding: 20px;
}

I thought it might have had something to do with the main links in the topnav so I added the "top" class to them but that didn't help. Originally I just had it nested with

#topnav li a .subnav

Answer 1

I don't think that this is the problem but the first thing that I can see is that you have an anchor tag wrapped around two divs with your submenu

<li><a class="top" href="#">
    <div class="button">Programs</div>
    <div class="subnav">
        <ul class="mainlinks">
            <li><a href="#">Recreational</a></li>
            <li>TESTING</li>
            <li>TESTING</li>
            <li>TESTING</li>
            <li>TESTING</li>
        </ul>
    </div>
    </a>
</li>

<li><a class="top" href="#">
    <div class="button">Programs</div>
    </a> ***************************** MOVED CLOSING TAG HERE
    <div class="subnav">
        <ul class="mainlinks">
            <li><a href="#">Recreational</a></li>
            <li>TESTING</li>
            <li>TESTING</li>
            <li>TESTING</li>
            <li>TESTING</li>
        </ul>
    </div>
</li>

as far as the issue is concerned I would say double check all stylings for a and verify that there is nothing that would conflict.