CSS 边框和 :hover dynamic pseudo-class

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状态为 <li>在 <ul> 内, 父边框 <ul>不包含在 :hover 中区域。为每个 <li> 添加边框将解决您的问题而不是 parent <ul> .确保将 0 的左右边距添加到 <li> s，即使您这样做了，您仍然可能需要添加一个负的左边距或左侧位置以消除边框中的任何间隙，以及向子菜单添加覆盖样式 <li>如果它们最终也有底部边框。

---

编辑:好的，我有一个解决方案，希望对您有用，使用以下 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
• 设置display:inline-block在 li所以 height 属性生效
  • (注意:zoom:1; _display:inline; 适用于 IE6)
• 设置position:relative主要ul li和 position:absolute在具有主要“ul li”高度的“top”值的子“ul li ul”上

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