<ul id="menu">
<li>first set<li>
<ul>
<li>second set</li>
<li>second set</li>
</ul>
<li>first set<li>
<li>first set<li>
</ul>
我已经为第一组列表应用了 border-left
#menu li
{
border-left: 1px solid black;
}
然而,当鼠标悬停在第一组时,第二组列表显示左边框为 2px。 但我不希望第二组有任何左边框。我如何删除这个 2px?
我可以通过使用删除 1px
#menu ul li
{
border-left: 0px;
}
我如何删除第二组的另一个 1px 边框?
最佳答案
在您的 CSS 中使用 #menu > li
而不是 #menu li
将边框限制为第一组。
即
#menu > li
{
border-left: 1px solid black;
}
更新
根据 OP 发布的 fiddle - http://jsfiddle.net/DrJsr/3/ ,标记为:
<ul id="menu">
<li>first set<li>
<ul>
<li>second set</li>
<li>second set</li>
</ul>
<li>first set<li>
<li>first set<li>
</ul>
上面有几个问题:
- 一些 LI 没有关闭。这可能导致某些浏览器将其误认为是另一个 li 的开始
- 第二组 UL 是主 UL 的直接子级——这在 HTML 中是无效的——理想情况下,第二个 UL 应该是主 UL 中的一个 LI 的子级
现在,关于边界——它确实工作正常。如果您使用 Firebug 或 Chrome 检查第二组的 UL,您会看到浏览器自动添加一个 LI 来包装第二组的 UL,从而自动使 HTML 有效。
即你的 HTML 自动变成:
<ul id="menu">
<li>first set</li>
<li> <!-- this is added by browser and this LI will have a left border since it falls under #menu > li -->
<ul>
<li>second set</li>
<li>second set</li>
</ul>
</li>
<li>first set</li>
<li>first set</li>
</ul>
这个新的 LI 属于 #menu > li
并呈现左边框。如果您 checkin Firebug,您会看到您看到的左边框是为这个新 LI 呈现的边框。
关于html - 仅在鼠标悬停后为第一组列表应用边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11541799/