Question

我在Firefox上遇到了一个奇怪的问题，我正在创建一个最多三个级别的菜单，并且所有内容都在chrome中工作正常，但在Firefox中点击“First Level Menu”之后，会打开一个带有两个元素的ul ，当我点击“二级菜单”时，突然显示该元素的背景颜色（灰色）消失，并且呈深灰色。

CSS：

.leftpanel
{
    width: 230px;
    float: left;
    background-color: #282828;
}

.leftpanel>ul
{
    padding-top: 10px;
}
.leftpanel li
{
    width: 230px;
}

.leftpanel li>a
{
    display: block;
}
.leftpanel ul a 
{ 
    color: #999; 
    padding: 10px 20px; 
    font-size: 13px; 
}
.leftpanel ul a span { margin-right: 10px; }
.leftpanel ul > li > a { border: 0; border-bottom: 1px solid #232323; }
.leftpanel ul > li > a:hover,
.leftpanel ul > li > a:focus { background-color: #2c2c2c; color: #fff; border-bottom-color: #232323; }
.leftpanel ul > li { margin-bottom: 0; }


.leftpanel ul > li.expand ul { background: #eee; }
.leftpanel ul > li.expand > a {
    background-image: url(../images/droparrow.png); background-repeat: no-repeat; background-position: right 19px; }

.leftpanel ul .expand ul li a  {
    display: block; font-size: 13px; padding: 7px 10px 7px 30px; color: #333;  
}
.leftpanel ul .expand ul li a:hover { text-decoration: none; background-color: #fff; color: black; border-bottom: 1px solid black;}
.leftpanel ul .expand ul ul li { border-right: 0; }
.leftpanel ul .expand ul ul li a { padding-left: 40px;}

.leftpanel ul > li.active > a { background-color: #5c0154 ; color: #fff; }
.leftpanel ul > li.active > a:hover { background-color: #5c0154; }
.leftpanel ul .expand ul li.active a { background-color: #972f8e; color: white; }

HTML部分发生的地方：

<li class="expand">
                <a href="#">First Level Menu</a>
                <ul>
                    <li class="expand">
                        <a href="#">Second Level Menu</a>
                        <ul>
                            <li>
                                <a href="page3.html">Third Level Menu</a>
                            </li>
                            <li>
                                <a href="bla.html">Another Third Level Menu</a>
                            </li>
                        </ul>
                    </li>
                    <li class="expand">
                        <a href="#">Another Second Level Menu</a>
                        <ul>
                            <li>
                                <a href="bla.html">Third Level Menu</a>
                            </li>
                            <li>
                                <a href="bla.html">Another Third Level Menu</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>

您可以在此处查看http://jsfiddle.net/qWLTS/

有人可以帮忙吗？这让我很生气..

Answer 1

我从你的CSS中删除了这两行，并且在FF上都运行良好，但是没有在chrome上测试过。

.leftpanel ul > li > a:hover,
.leftpanel ul > li > a:focus { background-color: #2c2c2c; color: #fff; border-bottom-color: #232323; }

Firefox没有读取嵌套元素的背景

1 个答案: