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.

Code:
#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!

30,000 Mb And Unlimited Bandwidth Only $3.75/mo.


Go Daddy $6.95 .com sale 468x60

Powered By: BigInfo.org