html - 仅在鼠标悬停后为第一组列表应用边框

Question

<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 边框？

Answer 1

在您的 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 呈现的边框。