下拉導航菜單不使用固定高度？

Question

這是一個簡單的下拉導航菜單。 這里的問題是，如果我不給它固定的高度，則不會出現下拉菜單。 有沒有一種方法可以使它看起來不固定高度？ 如果還有其他有用的修改或改進，請告訴我。 謝謝。 HTML：

<nav>
        <ul class="mainmenu">
            <li><a href="">Browsers</a>
                <div class="submenubig">
                    <div class="submenusmall Browsers">
                       <ul>
                            <li><span>Top Browsers</span>    
                              <ul class="topbrowsers">
                                    <li><a href="">Firefox</a></li>
                                    <li><a href="">Chrome</a></li>
                                    <li><a href="">Safari</a></li>
                                    <li><a href="">Opera</a></li>
                                    <li><a href="">Edge</a></li>
                                </ul>
                            </li>
                            <li><span>Other Browsers</span>
                                <ul class="otherbrowsers">
                                    <li><a href="">Dooble</a></li>
                                    <li><a href="">Coowon</a></li>
                                    <li><a href="">Blackhawk</a></li>
                                    <li><a href="">Beamrise</a></li>
                                    <li><a href="">NetGroove</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>  
         </ul>
</nav>

CSS：

*{
    box-sizing: border-box;
    font-family: Arial;
}
nav{
    border: 5px solid orange;
    height: 1000px;
}
ul{
    list-style: none;
    padding: 0;
}
.mainmenu{ 
    margin: 20px auto;
    display: table;
    width: 1000px;
    position: relative;
    background-color: #1E1E1E;
}
.mainmenu > li{
    display: table-cell;
}
a{
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
.mainmenu > li > a{
    font-size: 1.3em;
    padding: 0;
    color: white;
    letter-spacing: 0.1em;
}
.mainmenu > li > a:hover{
    color: aqua;
}
.mainmenu > li:hover .submenubig{
    border-bottom: 5px solid yellow;
    max-height: 1000px;
}
.submenubig{
    overflow: hidden;
    position: absolute;
    left: 0;
    width: 100%;
    transition: 0.2s all ease-in;
    max-height: 0px;
    background: #555;
}
.submenusmall a:hover{
    color: yellow;
    text-decoration: underline;
}
/*--------------------------------------------------*/
span{
    font-size: 1.3em;
    display: block;
    text-align: center;
    color: burlywood;
    letter-spacing: 0.1em;
}
.submenusmall{
    padding-top: 20px;
    padding-left: 60px;
}
.submenusmall a{
    color: white;
    font-size: 1.1em;
    letter-spacing: 0.1em;
}
.submenusmall > ul{
    height: 190px; 
    /*This is what i'm talking about*/
}
.submenusmall > ul > li{
    position: relative;
    float: left;
    padding: 0 10px;
    color: white;
    margin-right: 90px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.topbrowsers{
    position: absolute;
    left: 0;
    width: 100%;
    top: 45px;
    padding: 0;
}
.topbrowsers li{
    display: block;
    width: 100%;
    border-bottom: 1px solid grey;
}
.otherbrowsers{
    position: absolute;
    width: 100%;
    left: 0;
    top: 45px;
    padding: 0;
}
.otherbrowsers li{
    display: block;
    width: 100%;
    border-bottom: 1px solid grey;
}

Answer 1

我認為問題在於.topbrowsers和.otherbrowsers類的無序列表的位置是絕對位置 ：

該元素已從常規文檔流中刪除； 在頁面布局中沒有為元素創建空間。

您可以嘗試以下方法：

*{
    box-sizing: border-box;
    font-family: Arial;
}
nav{
    border: 5px solid orange;
    height: 1000px;
}
ul{
    list-style: none;
    padding: 0;
}
.mainmenu{ 
    margin: 20px auto;
    display: table;
    width: 1000px;
    position: relative;
    background-color: #1E1E1E;
}
.mainmenu > li{
    display: table-cell;
}
a{
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
.mainmenu > li > a{
    font-size: 1.3em;
    padding: 0;
    color: white;
    letter-spacing: 0.1em;
}
.mainmenu > li > a:hover{
    color: aqua;
}
.mainmenu > li:hover .submenubig{
    border-bottom: 5px solid yellow;
    max-height: 1000px;
}
.submenubig{
    overflow: hidden;
    position: absolute;
    left: 0;
    width: 100%;
    transition: 0.2s all ease-in;
    max-height: 0px;
    background: #555;
}
.submenusmall a:hover{
    color: yellow;
    text-decoration: underline;
}
/*--------------------------------------------------*/
span{
    font-size: 1.3em;
    display: block;
    text-align: center;
    color: burlywood;
    letter-spacing: 0.1em;
}
.submenusmall{
    padding-top: 20px;
    padding-left: 60px;
}
.submenusmall a{
    color: white;
    font-size: 1.1em;
    letter-spacing: 0.1em;
}
.submenusmall > ul{
//  height: 190px; 
    /*This is what i'm talking about*/
}
.submenusmall > ul > li{
    position: relative;
    float: left;
    padding: 0 10px;
    color: white;
    margin-right: 90px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.topbrowsers{
//  position: absolute;
//  left: 0;
    width: 100%;
//  top: 45px;
    padding: 30px 0;
}
.topbrowsers li{
    display: block;
    width: 100%;
    border-bottom: 1px solid grey;
}
.otherbrowsers{
//  position: absolute;
    width: 100%;
//  left: 0;
//  top: 45px;
    padding: 30px 0;
}
.otherbrowsers li{
    display: block;
    width: 100%;
    border-bottom: 1px solid grey;
}