CSS3: how to make a dynamic drop down navigation bar without JS - html

Question

So I am trying to make a pure CSS3 dropdown navigation. Of all the stack overflow questions about this, this was the closest I found.
What I dislike, however, is the use of defined heights, which makes everything a pain to refactor if you wish to change the heights later on.
Below is my own attempt, which uses barely any css and gets close to the desire result. The only issues with it is:
the "drop down" is more of a shove up and
if the first point is fixed, it would look bad in a header (as the entire header would jump about)
How can I fix these issues with minimal CSS and in a way that is dynamic and flexible (e.g. no absolute positionings, no fixed heights, etc)
/* all the CSS needed to make the drop down*/
/* set horizontal navigation for list elements*/
nav ul li {
display: inline-block;
}
/*remove padding from nested unordered list to get text to align*/
li > ul {
padding: 0;
}
/* hide nested list elements*/
li > ul li{
display: none;
padding: 0;
}
/* when hovering on the outer list element display nested list elements */
li:hover ul li{
display: block;
}
/* the following is added just to make the links clear to see*/
/*make text eady to see on dark background*/
li {
border: 1px coral solid
}
/*highlight the issue with the header bouncing*/
nav {
background-color: black;
color: coral;
}
<nav>
<ul>
<li><a>Link</a></li>
<li>
<a>Drop Down</a>
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ul>
</li>
</ul>
</nav>

Answer 1

How is this, just added absolute positioning to the child ul - using absolute positioning doesn't make it any less responsive
/* all the CSS needed to make the drop down*/
/* set horizontal navigation for list elements*/
nav ul li {
display: inline-block;
position:relative;
}
/*remove padding from nested unordered list to get text to align*/
li>ul {
padding: 0;
position:absolute;
width:100%;
background: black; /* not sure if you want background-color on this */
}
/* hide nested list elements*/
li>ul li {
display: none;
padding: 0;
}
/* when hovering on the outer list element display nested list elements */
li:hover ul li {
display: block;
}
/* the following is added just to make the links clear to see*/
/*make text eady to see on dark background*/
li {
border: 1px coral solid
}
/*highlight the issue with the header bouncing*/
nav {
background-color: black;
color: coral;
}
<nav>
<ul>
<li><a>Link</a></li>
<li>
<a>Drop Down</a>
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ul>
</li>
</ul>
</nav>

Answer 2

Use absolute position to style the dropdown.So the height issue will be fixed.Also don't forgot to add position:relative to the parent li tags.So the dropdown will position relative to the li tags
/* all the CSS needed to make the drop down*/
/* set horizontal navigation for list elements*/
nav ul li {
display: inline-block;
position:relative;
}
/*remove padding from nested unordered list to get text to align*/
li > ul {
padding: 0;
}
/* hide nested list elements*/
li > ul li{
display: none;
padding: 0;
}
/* when hovering on the outer list element display nested list elements */
li:hover ul li{
display: block;
}
/* the following is added just to make the links clear to see*/
/*make text eady to see on dark background*/
li {
border: 1px coral solid
}
/*highlight the issue with the header bouncing*/
nav {
background-color: black;
color: coral;
}
.dropdown{
position:absolute;
z-index:999;
width:100%;
}
<nav>
<ul>
<li><a>Link</a></li>
<li>
<a>Drop Down</a>
<ul class="dropdown">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ul>
</li>
</ul>
</nav>