CSS 边框和 :hover 动态伪类

Question

我只使用 CSS 构建了一个具有两个级别的持久下拉菜单。这是相当标准的。

它是一组嵌套的 UL，UL 的 :hover 状态用于显示和隐藏子菜单级别。

类似这样的：

| *Pets* | Colors | Cars |
| Cats | Dogs | Birds| Goats | Sheep | 


| Pets | *Colors* | Cars |
| Red | Orange | Green | Blue| Yellow |

然后我在第一级 UL 元素的底部添加了一个 1px 的边框。像这样：

| *Pets* | Colors | Cars |
--------------------------------------
| Cats | Dogs | Birds| Goats | Sheep | 

当我将鼠标悬停在第一级项目（宠物）上，然后将鼠标向下移动到第二级（猫）时，整个第二级都会消失。

我终于发现UL的1px边框不包含在UL的悬停区域中。

我可以在下拉菜单级别的底部添加边框，而不会弄乱菜单悬停吗？

谢谢！

Answer 1

由于您实际上是将:hover 状态添加到<ul> 内的<li>s，因此父<ul> 上的边框不包含在:hover 区域中。将边框添加到每个<li> 而不是父<ul> 将解决您的问题。确保将 0 的左右边距添加到 <li>s，即使这样做，您仍然可能需要添加负的左边距或左边距以消除边框中的任何间隙，以及添加覆盖样式到子菜单<li>s 如果它们也以底部边框结束。

---

编辑：好的，我有一个解决方案，希望对你有用，使用以下 HTML：

<ul>
    <li>Main1
      <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
    </li>
    <li>Main2
      <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
    </li>
    <li>Main3
      <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
    </li>
    <li>Main4
      <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
    </li>
</ul>

还有这个 CSS：

ul { background:#ccc; border-bottom:5px solid #0c0; height:25px; }
ul li { cursor:pointer; display:inline-block; position:relative; height:30px; 
        zoom:1; _display:inline; }
ul li:hover ul { display:block; }
ul li ul { border:0 none; display:none; position:absolute; top:30px; }
ul li ul li { display:inline; padding:5px; }

​ ​这里的关键部分是：

• 将ul 的高度设置为比主ul li 的高度小等于border-width 的数量
• 在li上设置display:inline-block，使高度属性生效
  • （注：zoom:1; _display:inline; 用于 IE6）
• 在主ul li 上设置position:relative 和在子'ul li ul' 上设置position:absolute，'top' 值为主'ul li' 高度

测试和工作：http://jsfiddle.net/TKrSM/1/ （可能需要在您的版本中调整填充高度和顶部值）

Answer 2

您可以使用背景并在底部给它一个 1px 的黑线，或者您可以添加一个元素并将其绝对定位为 1px 高度和黑色背景。我会选择背景选项，因为它更容易。