0

I have a CSS menu that works great in Chrome, it is absolutely miserable in Firefox. I've tried different positioning, etc. at least 50 different ways with no fix. Check it out in FF here: http://morrisonhosting.com/ryan/BusinessSite/index.html

4

2 回答 2

2

看看这个小提琴 ，只需从中复制并粘贴代码，您的菜单就可以在每个浏览器中工作，事实上 ie7 支持检查一下 :-) 这里是 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;
}
于 2013-04-29T04:59:00.793 回答
0

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

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

截至目前，您的代码在 Chrome 中甚至可以打破（从主菜单中的第 2 个选项移动到第 3 个选项），因此大批量处理似乎是一个不错的选择。

上面的代码在我测试的所有浏览器（Safari、Chrome、FF）中运行良好

最好的祝愿，

于 2013-04-29T05:10:55.840 回答