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类的无序列表设置为position absolute：

元素从正常文档流中删除;没有空间为页面布局中的元素创建。

你可以试试这个：

*{
    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;
}

下拉导航菜单不使用固定高度？

1 个答案: