Javascript 导航元素不'；t伸展到父母的高度

我的导航有一个小问题。 我有类似这样的东西，我想让第一级菜单元素具有相同的高度，就像这个级别菜单中最高的元素一样（在本例中，元素有3行文本）。我试图为每个元素设置100%的高度，但没有效果：（.我不知道如何解决这个问题，但我知道如果我这样做，打开的子菜单将直接放置在导航下方，这是我的目标。谢谢你的帮助，我的英语很抱歉：）

一级

第2级项目1
二级项目2
二级项目3



1级
第2项


第1级
第3项
第3行

第2级项目4
二级项目5



.clearfix:之后{
内容：“.”；
显示：块；
身高：0；
可见性：隐藏；
明确：两者皆有；
}
.多级菜单{
利润率-顶部：50像素；
背景：水；
}
.多级菜单*{
保证金：0；
填充：0；
}
.多级菜单li{
列表-样式-类型：无；
位置：相对位置；
背景色：绿黄色；
}
.多级菜单li:悬停>ul{
显示：块；
}
.多级菜单a{
显示：块；
填充物：0.5em2em；
文字装饰：无；
}
.多级菜单a：悬停{
背景色：红色；
}
.多级菜单li ul{
显示：无；
位置：绝对位置；
}
.多级菜单.第一级菜单{
浮动：左；
}
.multi_level_menu.menu_first_level>li{
浮动：左；
/*身高：100%；不工作*/
}
/*.多级菜单。菜单第一级菜单>li>a{
身高：100%；
} 
不起作用*/
.多级菜单.第二级菜单{
左：0；
最高：100%；
}

您可以在jquery下面尝试：迭代所有第一级

li

并获得最高的

li

高度。将最高高度指定给所有

li

$(function(){
    var ht = 0;
    $('.menu_first_level li').each(function(){
        var htLi = $(this).height();
        if(htLi > ht)
            ht = htLi;
    });
    $('.menu_first_level li').css('height',ht+'px');
});

Javascript解决方案：

$(document).ready(function() {
    var maxHeight = 0;
    var lis = $('.menu_first_level').find('li');
    lis.each(function() {
        maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;    
    });
    lis.height(maxHeight);
});

JSFiddle：

或者您可以将

li

元素的高度设置为100%，并专门将父

ul

元素的高度设置为

li

元素的最大高度。您的高度100%不起作用的原因是

ul

元素没有指定高度

因此，这也适用于仅将

li

元素设置为100%高度的情况：

$(document).ready(function() {
    var maxHeight = 0;
    var lis = $('.menu_first_level').find('li');
    lis.each(function() {
        maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;    
    });
    $('.menu_first_level').height(maxHeight);
});

jsidle:

CSS解决方案：

.multi_level_menu .menu_first_level {
    display: block;
    float: none;
}
.multi_level_menu .menu_first_level > li {
    display: table-cell;
    float: none;
    vertical-align:top;
}

---

将鼠标悬停在第一个菜单上后选中它。+1。。。确切地说，如果容器有一些固定的高度，比如100px，那么100%的高度将是有效的…@AamirShahzad谢谢（顺便说一句，如何将此解决方案添加到小提琴中？），我为我糟糕的英语感到抱歉。我为你做了小提琴，它实际上工作得很好：好，但是第一级菜单的“a”元素仍然没有它们的父级高度。请你也这样做好吗？@WebBeginner如果“a”元素只是打开子菜单的借口，为什么不试试这个呢。多级菜单li:hover{background color:red；}@Maurizio Battaghini，但可能在该页面的特性中，“a”元素也可以用作指向类别根的链接

.multi_level_menu .menu_first_level {
    display: block;
    float: none;
}
.multi_level_menu .menu_first_level > li {
    display: table-cell;
    float: none;
    vertical-align:top;
}