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来解决我的位置问题：两个并且向左浮动，现在我有问题试图让我的下拉列表是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

相当少的代码样式，因此很容易删除和修改自己

Answer 2

很容易找到。以下关键字返回良好匹配：没有javascript 2011的CSS菜单
我更喜欢使用无需Javascript 的下拉菜单。看看this一个。代码非常小，也兼容跨浏览器。

Answer 3

您尚未关闭nav标签...这可能意味着浏览器可以忽略它。

CSS下拉菜单 - ＆gt;跨浏览器

3 个答案: