Question

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

Screenshot- enter image description here

代码 -

<LI id=navPreretire><A title="Pre Retirement Procedures"  href="http://pencproc/" target=_blank><SPAN class=singleLine>Pre Retirement Procedures</SPAN> </A>

        <!--Mega menu drop-down part1, the div have to stay like that-->
        <div class="dropdown">
        <!--until here-->
            <Ul>
                <div class="dropdown_3rd_lvl1"><li ><a href="#">Plan Benifit Payment Procedures</a>
                    <ul>
                        <li ><a href="#">Communications</a></li>
                        <li ><a href="#">Manage Payments</a></li>
                        <li ><a href="#">Manage Pension Benefits</a></li>
                        <li ><a href="#">Reports</a></li>
                    </UL></li></div>

                <div class="dropdown_3rd_lvl2"><li ><a href="#">Pension Services Procedures</a>
                    <ul>
                        <li ><a href="#">Communications</a></li>
                        <li ><a href="#">Manage Group Benefits</a></li>
                        <li ><a href="#">Manage Payments</a></li>
                        <li ><a href="#">Manage Pension Benefits</a></li>
                        <li ><a href="#">Reports</a></li>
                        <li ><a href="#">Reports</a></li>
                        <li ><a href="#">Reports</a></li>
                        <li ><a href="#">Reports</a></li>
                        <li ><a href="#">Reports</a></li>
                        <li ><a href="#">Reports</a></li>
                        <li ><a href="#">Reports</a></li>
                        <li ><a href="#">Reports</a></li>
                    </UL></li></div>

            </ul>
       <!--Menu ends-->
       </div>
       <!--Menu ends-->
    </LI>

CSS -

.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;
}

Answer 1

删除不必要的height，position:absolute。

#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;
}

Answer 2

问题至少在一定程度上是由于#menu ul将height: 38px应用于条形码，但也会被更深层次地应用于ul后代。< / p>

整个菜单栏似乎有点过于复杂，无法实现您想要实现的目标，并且可以通过更简单的方式完成。

100％高度在下拉菜单中不起作用

2 个答案: