Trouble positioning content in dropdown menu - html

Question

I have this dropdown menu:
<nav>
<ul>
<li><a>Home</a></li>
<li><a>Who are we</a></li>
<li><a>Habitat</a></li>
<li id="menu">
<a>Raising in Captivity</a>
<ul id="dropdown">
<li><a>Temperature and Humidity</a></li>
<li><a>UVB</a></li>
<li><a>Diet</a></li>
</ul>
</li>
</ul>
</nav>
and the CSS for it:
nav {
border-top: solid 1px #DADADA;
border-bottom: solid 1px #DADADA;
margin-top: 60px;
text-align: center;
}
li {
display: inline-block;
}
#dropdown {
display: none;
}
#dropdown.active {
position: absolute;
display: flex;
flex-direction: column;
position: relative;
line-height:15px;
}
a {
padding: 15px;
margin: 10px;
text-decoration: none;
text-transform: uppercase;
color: black;
font-size: 15px;
font-weight: bold;
}
and the JavaScript:
document.getElementById("menu").addEventListener("click", openMenu);
function openMenu() {
document.getElementById("dropdown").classList.toggle("active");
}
When you click on the Raising in Captivity link it opens the three dropdown options and it works, but they are positioned inside the navigation, I want them to show up just below the Raising in Captivity element , outside of the bottom border, how can I do that with css?
Here is a demo:
https://jsfiddle.net/philip9/farc0xmz/1/

Answer 1

#dropdown.active {
margin-top: 15px;
display: flex;
flex-direction: column;
position: absolute;
line-height:20px;
padding: 10px;
margin-left: -40px;
}
position: absolute. Then I think it looks nice with padding and margin-left added as well. Centers it under

Answer 2

You need to update the style for #dropdown.active. There are 2 position styles, remove position:releative and add some margin to move the drop-down below the lower border.
document.getElementById("menu").addEventListener("click", openMenu);
function openMenu() {
document.getElementById("dropdown").classList.toggle("active");
}
nav {
border-top: solid 1px #DADADA;
border-bottom: solid 1px #DADADA;
margin-top: 60px;
text-align: center;
}
li {
display: inline-block;
}
#dropdown {
display: none;
}
#dropdown.active {
position: absolute;
display: flex;
flex-direction: column;
line-height: 15px;
margin-top: 15px;
}
a {
padding: 15px;
margin: 10px;
text-decoration: none;
text-transform: uppercase;
color: black;
font-size: 15px;
font-weight: bold;
}
<nav>
<ul>
<li><a>Home</a></li>
<li><a>Who are we</a></li>
<li><a>Habitat</a></li>
<li id="menu">
<a>Raising in Captivity</a>
<ul id="dropdown">
<li><a>Temperature and Humidity</a></li>
<li><a>UVB</a></li>
<li><a>Diet</a></li>
</ul>
</li>
</ul>
</nav>

Answer 3

remove position: relative from #dropdown.active selector styles:
#dropdown.active {
position: absolute;
display: flex;
flex-direction: column;
line-height:15px;
}

Answer 4

Probably your problem is because you have both position: absolute; and position: relative; in the #dropdown.active CSS. Remove the position: relative; and adjust the margins.

Answer 5

Added/Updated these styles
#dropdown a {
padding: 0;
margin: 0;
}
#menu {
position: relative;
}
#dropdown.active {
position: absolute;
display: flex;
flex-direction: column;
line-height: 15px;
left: 0;
text-align: left;
}
nav {
border-top: solid 1px #DADADA;
border-bottom: solid 1px #DADADA;
margin-top: 60px;
text-align: center;
}
li {
display: inline-block;
}
#dropdown {
display: none;
}
#menu {
position: relative;
}
#dropdown.active {
position: absolute;
display: flex;
flex-direction: column;
line-height: 15px;
left: 0;
text-align: left;
padding-top: 10px;
}
a {
padding: 15px;
margin: 10px;
text-decoration: none;
text-transform: uppercase;
color: black;
font-size: 15px;
font-weight: bold;
}
#dropdown a {
padding: 0;
margin: 0;
}
<nav>
<ul>
<li><a>Home</a></li>
<li><a>Who are we</a></li>
<li><a>Habitat</a></li>
<li id="menu">
<a>Raising in Captivity</a>
<ul id="dropdown">
<li><a>Temperature and Humidity</a></li>
<li><a>UVB</a></li>
<li><a>Diet</a></li>
</ul>
</li>
</ul>
</nav>
<script>
document.getElementById("menu").addEventListener("click", openMenu);
function openMenu() {
document.getElementById("dropdown").classList.toggle("active");
}
</script>

Answer 6

Your CSS code contains a duplicate entry for position property. So remove 'position: relative' from it. I added a margin-top of 25px to bring it below the bottom border.
You don't need to change the HTML and Javascript of your code. Change the CSS file as follows:
nav {
border-top: solid 1px #DADADA;
border-bottom: solid 1px #DADADA;
margin-top: 60px;
text-align: center;
}
li {
display: inline-block;
}
#dropdown {
display: none;
}
#dropdown.active {
position: absolute;
display: flex;
flex-direction: column;
margin-top: 25px;
line-height:15px;
}
a {
padding: 15px;
margin: 10px;
text-decoration: none;
text-transform: uppercase;
color: black;
font-size: 15px;
font-weight: bold;
}