CSS边框和：hover动态伪类

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

它是一组嵌套的UL和UL：悬停状态显示和隐藏子菜单级别

大概是这样的：

| *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的悬停区域中

我是否可以在不破坏悬停菜单的情况下，在dropline菜单级别的底部添加边框

---

谢谢

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

因为您实际上是在

区域内的
中添加
:hover
状态，所以父
上的边框不包括在
:hover
区域中。将边框添加到每个
而不是父级
可以解决您的问题。请确保在
中添加0左右边距，即使这样做，也可能需要添加负的左边距或左位置以消除边框中的任何间隙，如果子菜单也有底部边框，则还需要向子菜单添加覆盖样式。

编辑：好的，我有一个解决方案，希望能为您工作，使用以下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>

​
​这里的关键部分是：


将
ul
的高度设置为小于主
ul li
的高度等于
边框宽度
在
li
上设置
display:inline block
，使高度属性生效

（注意：
zoom:1；_display:inline；
用于IE6）

使用主“ul li”高度的“top”值，在主“ul li”上设置
位置：相对
，在子“ul li ul”上设置
位置：绝对

测试和工作：
（可能需要调整版本中填充的高度和顶部值）
谢谢您的回答。我试着给LI-child元素添加一个边框，但它引起了一些问题。例如，一些菜单级别只有几个项目。它们不够宽，无法跨越整个页面宽度。LI上的任何边框也不够宽，无法跨越整个页面宽度。哇！令人惊叹的！这正是我所需要的。谢谢你的回答。还有一个问题。如何使子UL元素与顶级UL左对齐？它们出现在悬停的父LI下方。谢谢非常感谢你的回答。我也考虑过背景图像的解决方案。我没有想到1px高度的绝对定位块。
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; }