Question

我有一个在Chrome中运行良好的CSS菜单，它在Firefox中绝对是悲惨的。我已经尝试了不同的定位等，至少50种不同的方式，没有修复。在FF中查看它：http://morrisonhosting.com/ryan/BusinessSite/index.html

Answer 1

看看这个fiddle 只需从中复制并粘贴代码，您的菜单就可以在每个浏览器中工作，即支持7 看一下这个：-）这是HTML代码： - ）

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a>
        <ul class="subnavi">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>    
    </li>
    <li><a href="#">Products</a></li>
    <li><a href="#">FaQs</a></li>
    <li><a href="#">Contact</a>
        <ul class="subnavi">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul> 
    </li>
    <li><a href="#">Blog</a></li>
</ul>

这里是css根据您的需要修改它

#nav{list-style:none; background:#333; height:30px; line-height:30px;}
ul#nav > li{ 
    float:left; 
    border-right:1px solid #ccc;
    position:relative;
}
ul#nav li a{
    padding:0 15px;
    display:block;
    text-decoration:none;
    color:#fff;
}
#nav li a:hover{
    background:#ccc;
}
ul.subnavi{
    list-style:none;
    position: absolute;
    left: 0;
    background: #fff;
    display:none;
}
ul.subnavi li{
    display:block;
    width:120px;
    float:none;
}
ul#nav li ul.subnavi li a{
    color:#333;
}
ul#nav li ul.subnavi li a:hover {
    background:#333;
    color:#fff;
}
#nav li:hover ul{
    display:block;
}

Answer 2

我建议您使用干净的示例重建代码，例如：

http://www.handy-html.com/create-a-simple-css-dropdown-menu/

到目前为止，您的代码甚至在Chrome中都会中断（在主菜单中从第2个选项移到第3个选项），所以主要的选择似乎是一个不错的选择。

以上代码适用于我测试的所有浏览器（Safari，Chrome，FF）

祝福，

如何让我的菜单在Firefox中运行？

2 个答案: