CSS Drop Down Menu -> Cross Browser

Can any of you wonderful developers link or provide me with a link to a menu that is cross browser I am having issues with mine and its loading within firefox but is fine in chrome.

My div stays in the correct position but the menu itself drops down below the div.

My HTML is dynamically generated and the current structure is:

<nav id="mainMenu"> 
        <ul> 
    <li class="first"> 
        <a href="#">Single Item</a> 
    </li> 
</ul> 
<ul> 
    <li class=""> 
        <a href="#">Drop Down Menu</a> 
        <ul> 
            <li class="first"> 
                <a href="#">Item 1</a> 
            </li> 
            <li class="last"> 
                <a href="#">Item 2</a> 
            </li> 
        </ul> 
    </li> 
</ul>

My Current CSS is:

    #mainMenu{
     height:50px;
     margin:0 auto 15px auto;
     background-color:#6a6a6a;
     -moz-border-radius:3px;
     -webkit-border-radius:3px;
     min-width: 800px;
 }

 #mainMenu ul{
     display:inline;
     -webkit-border-bottom-right-radius:2px;
     -webkit-border-bottom-left-radius:2px;
     -moz-border-radius-bottomright:2px;
     -moz-border-radius-bottomleft:2px;
 }

 #mainMenu ul li{
     margin-left:0px;
     width:120px;
     height:56px;
     float: left;
     list-style: none;
     position:relative;
 }


 #mainMenu li a {
     float:left;
     display:block;
     text-decoration:none;
     width:120px;
     height:35px;
     font-size:13px;
     line-height:45px;
     text-align:center;
     color:#fff;
     text-transform:uppercase;
     padding-top:-4px;
     margin:0px;
 }

 #mainMenu li a:hover, #mainMenu li a:active{
     text-decoration:none;
     background-color:#7a7a7a;
     color:#fff;
     width:120px;
     height:50px;
    -webkit-border-top-left-radius:2px;
     -webkit-border-bottom-left-radius:2px;
     -moz-border-radius-topleft:2px;
     -moz-border-radius-topleft:2px;
 }

 #mainMenu .signup 
 {
     float: right;
 }

 #mainMenu .signup a{
     background-color:#69c21c;
     height:50px;   
    -webkit-border-top-right-radius:2px;
     -webkit-border-bottom-right-radius:2px;
     -moz-border-radius-topright:2px;
     -moz-border-radius-bottomright:2px;
 }

 #mainMenu li .signup a:hover{
     background-color:#00afd8;
 }

 /*mainMenu Sub Menu */

 #mainMenu ul li ul{

     display: none;
     background-color:#7a7a7a;     
 }

 #mainMenu ul li:hover ul{
     text-transform:none;
     display:block;
     position:absolute;
     width:80px;
     top:50px;     
 }

 #mainMenu ul li:hover ul a{
     float:left;
     margin:0 0 0 -35px;
     line-height:35px;
     width:150px;
     height:35px;
     border:none;
     font-size:12px;
     text-align:left;
     text-transform:none;
 }

 #mainMenu  ul li ul li a:hover{    
     width:115px;
     height:30px;
     font-weight:bold;
     margin-left:-35px;
     line-height:35px;
 }

Update:

I have fixed my 开发者_高级运维li positional issue by adding clear:both and float left, Now I am having issues trying to get my dropdown li's to be the height and width of the li's:

#mainMenu{
    clear:both;
    float:left;
    margin:0 auto 15px auto;
    padding:0;
    z-index:1000;
    position:relative;
    height:50px;
    background-color:#6a6a6a;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    min-width: 800px;
 }

 #mainMenu ul{
     display:inline;
     -webkit-border-bottom-right-radius:2px;
     -webkit-border-bottom-left-radius:2px;
     -moz-border-radius-bottomright:2px;
     -moz-border-radius-bottomleft:2px;
 }

 #mainMenu ul li{
     margin-left:0px;
     width:120px;
     height:56px;
     float: left;
     list-style: none;
     position:relative;
 }


 #mainMenu li a {
     float:left;
     display:block;
     text-decoration:none;
     width:120px;
     height:35px;
     font-size:13px;
     line-height:45px;
     text-align:center;
     color:#fff;
     text-transform:uppercase;
     padding-top:-4px;
     margin:0px;
 }

 #mainMenu li a:hover, #mainMenu li a:active{
     text-decoration:none;
     background-color:#7a7a7a;
     color:#fff;
     width:120px;
     height:50px;
    -webkit-border-top-left-radius:2px;
     -webkit-border-bottom-left-radius:2px;
     -moz-border-radius-topleft:2px;
     -moz-border-radius-topleft:2px;
 }

 #mainMenu .signup 
 {
    display:block;
    float:right;

}

 #mainMenu .signup a{
     background-color:#69c21c;
     height:50px;   
    -webkit-border-top-right-radius:2px;
     -webkit-border-bottom-right-radius:2px;
     -moz-border-radius-topright:2px;
     -moz-border-radius-bottomright:2px;
 }

 #mainMenu li .signup a:hover{
     background-color:#00afd8;
 }

 /*mainMenu Sub Menu */

 #mainMenu ul ul{
    display:none; /* Sub menus are hiden by default */
    position:absolute;
    top:2em;
    left:0;
    right:auto; /*resets the right:50% on the parent ul */
    width:10em; /* width of the drop-down menus */
    background-color:#7a7a7a;     
 }

 #mainMenu ul ul li{
    left:auto;
    margin:0;
    clear:left;
    width:50%;
}

 #mainMenu ul ul li a,
 #mainMenu ul li.active li a,
 #mainMenu ul li:hover ul li a,
 #mainMenu ul li.hover ul li a { /* This line is required for IE 6 and below */
   font-weight:normal; /* resets the bold set for the top level menu items */
   line-height:1.4em; /* overwrite line-height value from top menu */
}   

 #mainMenu ul li:hover ul{
     text-transform:none;
     display:block;
     position:absolute;
     width:155px;
     top:50px;
 }

 #mainMenu ul li:hover ul a{
     float:left;
     margin:0 0 0 -35px;
     line-height:35px;
     width:150px;
     height:35px;
     border:none;
     font-size:12px;
     text-align:left;
     text-transform:none;
}

 #mainMenu  ul li ul li a:hover{    
     width:170px;
     height:30px;
     font-weight:bold;
     margin-left:-35px;
     line-height:35px;
 }

Very good menu http://matthewjamestaylor.com/blog/centered-dropdown-menus

Quite minimal amount of code styling so its easy to strip down and modify yourself

1. Very easy to find. The following keywords return good matches: css menu without javascript 2011

2. I prefer dropdown menus which work without Javascript. Have a look at this one. Very small code and also cross-browser compatible.

You haven't closed the nav tag ... which probably means the browser can ignore it.