I have a div which houses a sub menu for my navigation system. It is only displayed when one of three tabs are hovered over. However, the div is not functioning as it should: instead of displaying where it should with the text inside, firefox renders the container above the text, and the text directly below. The text is in the correct place and works fine, but the box interferes with the tabs because it is positioned on top of the tabs and thus make part of the tabs unclickable. Now, if I try to z-index the subnav div to below the tabs, it fixes the tab problem, but I'm then unable to click the links within the subnav menu.

#nav {
    position: relative;
    top: 43px;
    left: 100px;
    float:left;
    width:100%;
    line-height:normal;
    }
    
    #nav ul {
        list-style-type: none;
        margin: 0;
        margin-left: 10px;
        padding: 0;
        }
        
    #nav li {
        display: inline;
        position: relative;
        margin: 0;
        padding: 0;
        }
        
    #nav a {
        float: left;
        background: url(../images/tab_left_both.gif) no-repeat left top;
        margin: 0;
        padding: 0 0 0 9px;
        text-decoration: none;
        }
                
                
    #nav a span {
        float: left;
        display: block;
        background: url(../images/tab_right_both.gif) no-repeat right top;
        padding: 5px 14px 5px 5px;
        font-weight: bold;
        color: #FFFFFF;
        }    
    
    #nav li:hover a {
        background-position: 0% -258px;
        }
    
    #nav li:hover span {
        background-position: 100% -258px;
        color: #000000;
        }
        
#header .subnav {
background-color:#FF3366;
    display:none;
    width: 100%;
    position: relative;
    height: 25px;
    line-height: 25px;
    top: 44px;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
    z-index:-1;
    }
        
    #header .subnav a, #header .subnav a:visited {
        color: #FFFFFF;
        text-decoration: none;
        }
        
    #header .subnav a:hover {
        text-decoration: underline;
        }

That is my CSS for both the nav menu and the submenu.
The website is http://northvillebasketball.com, if you'd like to see how it doesn't work in firefox. I've made the background color of the DIVs a pinkish color, look for it behind the tabs.

Any help is really appreciated

Thank you!

I'm trying to work out why there is roughly a 25px gap at the top of the pink subnav div. If you can reduce the height of that div you should have no problem (and then position the subnav divs about 25px lower).

Well the thing is that pink div and the text are the same div. I'm not sure why it is placing the text in the right place, but the background shows up higher than it is supposed to. Why would the browser place them in different places? This works fine in IE.