CSS 导航菜单--悬停状态为父 UL 高度的 100%

Posted 2023-03-06

【中文标题】CSS 导航菜单--悬停状态为父 UL 高度的 100%

【英文标题】：CSS nav menu-- li a hover state be 100% of parent UL height

【发布时间】：2012-06-04 05:46:54

【问题描述】：

我在一个使用语言翻译插件的网站上有一个典型的 CSS 导航菜单。有些翻译最终比其他翻译要长，这导致一些 li 项目长两行，而兄弟 li 仍然只有一行长的问题。父 UL 垂直拉伸以容纳较长的项目，但由于较短的同级 li 仅一行长，因此它们的样式不太正确。

这很难用语言来解释。看截图： css screenshot http://dl.dropbox.com/u/6448156/CAP-hover.png

如您所见，双线是可以的，但是兄弟单线需要承担父UL的高度，以便右侧的白色边框一直向下，悬停状态也一直向下。

如何设置这些 li 项目的样式，以使它们填充父 UL 高度的 100%？ （因为将高度设置为 100% 只是将其设置为自身的 100%）

您可以在http://cap.wizzywighost.com/?s=post&lang=fr查看现场样本

希望能帮上忙。谢谢！

【参考方案1】：

最简单的解决方案应该是将border-right: 1px solid #fff设置为li的属性而不是子a的属性。

现在您的代码应该如下所示：

一个... 右边框：1px 实心#fff ...

您希望它看起来像这样： 李... 右边框：1px 实心#fff ...

一个...

【参考方案2】：

让我们看看the specs for height calculation：

百分比是相对于高度计算的 生成框的包含块。如果包含的高度 块没有明确指定（即，它取决于内容 高度），并且该元素不是绝对定位的，该值 计算为“自动”。

鉴于您没有在父 <ul> 上设置显式值（因为...好吧，您不能 - 您事先不知道最高盒子的高度），它会忽略 @987654325 @ 在菜单项上。

将导航块呈现为表格不会受上述影响。考虑到您可能还想在菜单中垂直对齐导航项，在这里使用表格并不丢人，尤其是考虑到它的支持范围最广，而不是使用 display:table*; 样式。

更新：

我看到您对无法使用表格的评论。如果您乐于放弃垂直对齐，faux columns 将是一个容易实现的技巧。这样做的目的是增加带有填充的菜单项的渲染高度，但会抵消以负边距占用的任何布局空间：

.menu-item, .menu-item a 
    padding-bottom:999px !important;margin-bottom:-999px !important;

您实际上不必使用!important，只要将这些属性添加到正确的规则fiddled。 IMO 这是您可以使用的最简单的与高度无关的修复方法。

【讨论】：

是的，这也是我能想到的，但我觉得这是一个糟糕的方法。但如果这是唯一的解决方案，我可能不得不这样做。虽然它是一个 wordpress 站点，但 UL 是自动生成的。我将不得不看看是否有任何方法可以改变它，所以它输出一个表格而不是一个列表。

【参考方案3】：

我已经为你的导航做了两个解决方案第一个是我刚刚为你的类定义了 min-height:50px: div.nav ul li a

如下所述，更新后的 CSS

div.nav ul li a 
    border-right: 1px solid white;
    color: white;
    display: block;
    min-height: 50px;
    padding: 5px 10px 3px;
    text-decoration: none;
    width: 167px;

一旦你用这个类更新你的 css，你就会得到想要的结果，我认为你正在寻找这个.....

第二种方法

我在不使用 Width 和 Height 的情况下使用了填充，因此您也可以看到替代方法...检查第二种方法 CSS

div.nav 
    background: none repeat scroll 0 0 #89BFE4;
    clear: both;
    color: #FFFFFF;
    font-size: 18px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    z-index: 199;

div.nav ul 
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    text-align: center;

div.nav ul li:hover 
    background: none repeat scroll 0 0 #FF9900;

div.nav ul li 
    border-right: 1px solid white;
    float: left;
    padding: 10px;

div.nav ul li a 
    color: white;
    display: block;
    text-decoration: none;

div.nav ul li:last-child a 
    border-right: medium none;

div.nav ul li a:hover, div.nav ul li:hover > a 
    color: white;

.current-menu-item 
    background: none repeat scroll 0 0 #FF9900;

div.nav ul ul 
    background: none repeat scroll 0 0 #FF9900;
    display: none;
    left: 93px;
    position: absolute;
    top: 42px;
    width: 250px;
    z-index: 200;

div.nav ul ul li 
    clear: left;
    position: relative;
    text-align: left;

div.nav ul ul li:hover, div.nav ul ul li:hover a 
    color: #FF9900;
    background: none repeat scroll 0 0 white;

div.nav ul ul li a, div.nav ul li.active li a 
    color: white;
    width: 250px;

div.nav ul ul li a:hover, div.nav ul li.active ul li a:hover, div.nav ul li:hover ul li a:hover, div.nav ul li.hover ul li a:hover 

div.nav ul > li:hover > ul, div.nav ul > li.hover > ul 
    display: block;

我希望这对您也有帮助，我试图为您提供最接近您问题的解决方案....

【讨论】：

不，这个解决方案不适合我们的情况。设计要求每个菜单项都有一个指定的宽度，这就是为什么我们不能让它们根据需要水平拉伸。 （这就是您的解决方案所做的）。此外，***解决方案也不起作用，因为无法明确调整 li 的大小。这是整个问题。否则我会让它们高 50 像素。但是用英语等查看时看起来很糟糕。