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>

我已经为第一组列表应用了左边框，使用

#menu li
{
  border-left: 1px solid black;
}

但是，当鼠标悬停第一组时，第二组列表显示左边框为 2px。但我不希望第二组有任何左边框。我如何删除这个 2px？

我可以使用删除 1px

#menu ul li
{
  border-left: 0px;
}

我如何才能删除第二组的另一个 1px 边框？

Answer 1

#menu > li在您的 CSS 中使用，而不是#menu li将边框限制为第一组。

IE

#menu > li
{
  border-left: 1px solid black;
}

更新

根据 OP 发布的小提琴 - 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并呈现左边框。如果您检查 Firebug，您会看到您看到的左边框是为这个新的 LI 渲染的。

Answer 2

有不同的方法来解决您的问题。这里有一个例子。

1. 创建一个 CSS 规则，其中有一个选择器指向第二组列表以设置边框样式。

   #menu li li {border-left:0;}
   

2. 更好的方法是在你的第二组列表中添加一个类或一个 id 并为其创建一个 CSS 规则。如果我假设您在第二个<ul>列表中添加了 class="sub-menu"，则添加以下 CSS 规则。

   #menu ul.sub-menu li {border-left:0;}
   

Answer 3

也许这个？

#menu:first-child
{
border-left: 1px solid black;
}