Dropdown navigation Menu without using fixed height? - html

Question

This is a simple dropdown navigation menu. The problem here that the dropdown menu doesn't appear if i don't give it a fixed height. Is there a way to make it appear without giving it a fixed height? And if there any other modifications or ameliorations that can be useful please tell me. Thank you.
HTML:
<nav>
<ul class="mainmenu">
<li>Browsers
<div class="submenubig">
<div class="submenusmall Browsers">
<ul>
<li><span>Top Browsers</span>
<ul class="topbrowsers">
<li>Firefox</li>
<li>Chrome</li>
<li>Safari</li>
<li>Opera</li>
<li>Edge</li>
</ul>
</li>
<li><span>Other Browsers</span>
<ul class="otherbrowsers">
<li>Dooble</li>
<li>Coowon</li>
<li>Blackhawk</li>
<li>Beamrise</li>
<li>NetGroove</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

I think the problem is that the unordered lists with the .topbrowsers and .otherbrowsers classes are set with position absolute:
The element is removed from the normal document flow; no space is
created for the element in the page layout.
You could try this:
*{
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;
}