html - CSS 下拉菜单 -> 跨浏览器

Question

你们中任何出色的开发人员都可以链接或向我提供跨浏览器菜单的链接吗？我的菜单及其在 firefox 中的加载有问题，但在 chrome 中没问题。

我的 div 保持在正确的位置，但菜单本身下降到 div 下方。

我的 HTML 是动态生成的，当前结构是:

<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>

我当前的 CSS 是:

    #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;
 }

更新:

我通过添加 clear:both 和 float left 解决了我的 li 位置问题，现在我在尝试让我的下拉列表 li 成为 li 的高度和宽度时遇到问题:

#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;
 }

Answer 1

很好的菜单http://matthewjamestaylor.com/blog/centered-dropdown-menus

极少的代码样式，因此很容易剥离和修改自己