CSS边框和：悬停动态伪类

我一直只使用CSS建立一个持久的支线菜单有两个层次。这是相当标准的。CSS边框和：悬停动态伪类

这是一组嵌套UL的和UL的：悬停状态是什么显示和隐藏子菜单的水平。

事情是这样的：

| *Pets* | Colors | Cars | 
| Cats | Dogs | Birds| Goats | Sheep | 


| Pets | *Colors* | Cars | 
| Red | Orange | Green | Blue| Yellow |

然后我在第一级UL元素的底部增加了一个像素边框。就像这样：

| *Pets* | Colors | Cars | 
-------------------------------------- 
| Cats | Dogs | Birds| Goats | Sheep |

当我将鼠标悬停在第一级别项目（宠物），然后将鼠标移动到第二级（猫），整个第二层消失。

我终于想通了，在UL的1px宽的边框不包括在UL的悬停区域。

我可以将边框添加到支线一级菜单的底部不会弄乱菜单徘徊？

谢谢！

来源

2010-05-23 dbasch

既然你实际上是<ul>内添加:hover状态到<li> S，父<ul>边界是不包括在:hover区域。这将解决您的问题，将边框添加到每个<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所以高度属性生效
- （注：zoom:1; _display:inline;为IE6）
上在副主ul li和position:absolute设置position:relative“UL利UL '具有'最高'值的主ul'高度

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

来源

2010-05-23 20:11:42 mVChr

谢谢你的回答。我试图给LI子元素添加边框，但是它引发了一些问题。例如，某些菜单级别只有几个项目。它们不够宽，无法跨越整个页面宽度。 LI上的任何边框也不足以跨越整个页面宽度。 – dbasch 2010-05-24 15:40:37

尝试新的解决方案，请参阅编辑答案。 – mVChr 2010-05-24 18:30:00

哇！真棒！这正是我需要的。感谢你的回答。 – dbasch 2010-05-25 02:17:24

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

来源

2010-05-23 17:51:30

非常感谢您的回答。我也曾考虑过背景图像解决方案。我没有想到1px高度的绝对定位块。 – dbasch 2010-05-25 02:16:04

CSS边框和：悬停动态伪类

回答

相关问题