Clickable and hover menu css - html

Question

So I want a dropdown menu but instead of it pop up in left, it will pop up down without overlay other subtopics and so these other subtopics will float to bot.
I made this montage on paint so you can see what I want:
enter image description here
nav ul {
box-shadow: 0px 0px 5px whitesmoke;
list-style-type: none;
background-color: #FB030F;
margin: 0;
padding: 0;
width:calc(100% - 3px);
}
nav > ul > li ul {
display: none;
}
nav ul > li {
display: block;
position: relative;
}
nav #m {
display: block;
padding: 5px 5px;
text-decoration: none;
white-space: nowrap;
color: white;
}
nav #m:hover {
background-color: #ff7373;
}
nav > ul li:hover > ul {
display: block;
position: absolute;
top: 0;
top: 100%;
}
ul li:hover > #n {
display: block;
position: absolute;
top: 0;
left: 100%;
}
nav a {
text-align: center;
}
<nav>
<ul>
<li>Builds
<ul id="n">
<li>Build 1</li>
<li>Build 2</li >
<li>Build 3</li>
<li>Build 4</li>
<li>Build 5</li>
<li>Build 6</li>
<li>Build 7</li>
<li>Build 8</li>
</ul>
</li>
<li>Configurador</li>
<li>Componentes</li>
<li>Guia</li>
</ul></li>
</nav>
Let me just write something here so I can post this question, because stack overflow is telling me that I cannot post this because I have too much code and so I have to add more details. But I guess my doubt is simple and I do not need to add more info, if I am wrong tell me please.

Answer 1

If I understand you right, then try this:
nav ul {
box-shadow: 0px 0px 5px whitesmoke;
list-style-type: none;
background-color: #FB030F;
margin: 0;
padding: 0;
width:calc(100% - 3px);
}
nav > ul > li ul {
display: none;
}
nav ul > li {
display: block;
position: relative;
}
nav #m {
display: block;
padding: 5px 5px;
text-decoration: none;
white-space: nowrap;
color: white;
}
nav #m:hover {
background-color: #ff7373;
}
nav > ul > li:hover ul {
display: block;
}
nav a {
text-align: center;
}
I just deleted some classes which positioned blocks absolute, that's why menu appeared not where you wanted.
Hope it'll help.