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> s 在 <ul> 内，父级的边框 <ul>不包含在 :hover 中区域。将边框添加到每个 <li> 可以解决您的问题而不是父 <ul> 。确保将 <li> 的左右边距添加为 0即使您这样做，您仍然可能需要添加负左边距或左侧位置以删除边框中的任何间隙，以及向子菜单 <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 ul”上，主“ul li”高度的“top”值

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