Question

我已经使用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 |

当我将鼠标悬停在第一级物品（宠物）上，然后将鼠标向下移动到第二级（Cats）时，整个第二级别消失。

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

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

谢谢！

Answer 1

由于您实际上将:hover状态添加到<li>中的<ul>，因此<ul>上的边框未包含在:hover中1}}区域。它可以解决您的问题，即为每个<li>而不是父<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，以便高度属性生效
- （注意：IE6的zoom:1; _display:inline;）
在主要position:relative上设置ul li，在'ul li ul'上设置position:absolute，使用主要'ul li'身高的'top'值

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

Answer 2

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

CSS边框和：hover动态伪类

2 个答案: