Html 100%高度不小于'；不要在下拉菜单上工作

现场检查-

当我向菜单中添加更多项目时，菜单容器不会展开，项目会超出菜单

截图-

代码-

---

问题至少部分是由于您的

#菜单ul

，它将

高度：38px

应用于条形图，但也将应用于更深几层的

ul

子体

---

整个菜单栏对于您想要实现的目标来说似乎有点过于复杂，可以用一种简单得多的方法来完成。

删除不必要的

高度

，

位置：绝对

#menu li:hover .dropdown {
    /*height: 200px;*/
}
#menu ul ul {
    height: auto;
}
.dropdown_3rd_lvl1 {
    /*position: absolute;*/
    /*left: 0*/
    /*margin-left: -30px;*/
    float: left;
}
.dropdown_3rd_lvl2 {
    /*position: absolute;*/
    /*margin-left: 170px;*/
    float: left;
}

---

事实上确实如此，但我认为你有一个z-index问题。我已经添加了z-index，但运气不好。你的html/css组织得不好。无论您在何处使用了不必要的

div

s、

height

、

absolute

position！。。。问题是在下拉列表中，当我添加工作的固定高度（如高度：300px）时，但当我添加高度时不工作：100%您能在打开一些更干净的代码的情况下隔离并重新创建问题吗？此外，高度100%不工作，因为它是基于其父级（即38px）计算100%。如果您没有声明高度，所有ul儿童（受您的#菜单ul影响）都将确定38px的高度。

.dropdown{
display: none;
BACKGROUND-COLOR: #886d53;
clear: both; 
}

.dropdown>ul>li{
clear: both;   
float: left;    
}

#menu li:hover .dropdown{
position: absolute;
display: block;
height:100%;
min-width: 430px;
margin: 38px auto; 
padding-top: 5px;    
}

.dropdown ul li{
clear: both;    
}

#menu .dropdown ul li:hover{
clear: both;
}

#menu li:hover .dropdown {
    /*height: 200px;*/
}
#menu ul ul {
    height: auto;
}
.dropdown_3rd_lvl1 {
    /*position: absolute;*/
    /*left: 0*/
    /*margin-left: -30px;*/
    float: left;
}
.dropdown_3rd_lvl2 {
    /*position: absolute;*/
    /*margin-left: 170px;*/
    float: left;
}