CSS 边框和 :hover 动态伪类

Posted 2023-05-08

【中文标题】CSS 边框和 :hover 动态伪类

【英文标题】：CSS border and the :hover dynamic pseudo-class

【发布时间】：2011-02-22 23:28:56

【问题描述】：

我只使用 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的悬停区域中。

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

谢谢！

【参考方案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/ （可能需要在您的版本中调整填充高度和顶部值）

【讨论】：

感谢您的回答。我尝试为 LI 子元素添加边框，但它引发了一些问题。例如，一些菜单级别只有几个项目。它们的宽度不足以跨越整个页面宽度。 LI 上的任何边框也不够宽，无法跨越整个页面宽度。

哇！惊人的！这正是我所需要的。感谢您的回答。

还有一个问题。如何让子 UL 元素与*** UL 左对齐？它们出现在悬停的父 LI 下方。谢谢！

【参考方案2】：

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

【讨论】：

非常感谢您的回答。我也考虑过背景图像解决方案。我没有想到 1px 高度的绝对定位块。