HTML/CSS menu style bar doesn't layout properly - html

Question

I'm working on a website as part of a revision tool, however I cannot seem to get my menu's layout to function properly, when trying to create dropdowns for multiple sections on the same list they either spawn on top of each other or layout to the side of where they should be, to note, a solution should only be using HTML and CSS.
To clarify, the dropdowns should appear underneath their respective "title heading" so to speak.
#menu a:link {
color: #C7C1C1;
text-decoration: none;
}
#menu a:visited {
color: #C7C1C1;
text-decoration: none;
}
#menu a:hover {
color: #FFFFFF;
}
#menu {
text-align: center;
top: 0px;
position: absolute;
margin-bottom: -61px;
font-size: 20px;
}
#menu ul {} #menu ul li {
display: inline;
padding-left: 30px;
padding-right: 30px;
}
#menu ul li ul {
display: none;
}
#menu ul li:hover ul {
display: inline-block;
top: 50px;
left:
/*when applying this makes all dropdowns stack*/
;
position: absolute;
background-color: #4D4D4D;
text-align: center;
}
<div id="menu">
<div>
<ul>
<li>Introduction
<ul>
<li>Past
</li>
<li>Present
</li>
<li>Future
</li>
</ul>
</li>
<li>History
<ul>
<li>Past
</li>
<li>Present
</li>
<li>Future
</li>
</ul>
</li>
<li>National Flags
<ul>
<li>Past
</li>
<li>Present
</li>
<li>Future
</li>
</ul>
</li>
<li>International Maritime Signal Flags
<ul>
<li>Past
</li>
<li>Present
</li>
<li>Future
</li>
</ul>
</li>
</ul>
</div>
</div>

Answer 1

You need to add position: relative; to the parent element to position the child absolute to it:
#menu ul li{
display: inline;
padding-left: 30px;
padding-right: 30px;
position: relative; // IMPORTANT
}
and you should only add the display: inline-block property to the hover #menu ul li: hover ul and the rest of the styling within the normal class definition: (just for convenience)
#menu ul li ul{
display: none;
top: 50px;
position: absolute;
background-color: #4D4D4D;
text-align: center;
width: 100%;
}

Answer 2

Set position: relative; to <li>
#menu ul li{
display: inline;
padding-left: 30px;
padding-right: 30px;
position: relative; // add this
}
And then set left: 0; position to <ul>
#menu ul li:hover ul{
display: inline-block;
top: 50px;
left: 0px; // Begin on the left of the li
position: absolute;
background-color: #4D4D4D;
text-align: center;
}