我在使用 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/
有人可以帮忙吗?这让我发疯..
最佳答案
我从你的 CSS 中删除了这两行,并且在 FF 上都运行良好,但没有在 chrome 上测试。
.leftpanel ul > li > a:hover,
.leftpanel ul > li > a:focus { background-color: #2c2c2c; color: #fff; border-bottom-color: #232323; }
关于html - Firefox 不读取嵌套元素的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21664840/