html - Firefox 不读取嵌套元素的背景

Question

我在使用 Firefox 时遇到了一个奇怪的问题，我正在创建一个最多三层的菜单，并且在 chrome 中一切正常，但是在 Firefox 中单击“一级菜单”后，会打开一个包含两个元素的 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; }