drop down navigation menu html5 - css

Question

I am attempting a 2 tier drop down menu. I believe I have everything in place but am not getting the drop down. also the :: after is showing pink in notepad ++. is that correct? Ultimately im trying to achieve 5 horizontal menus with the final actually having a vertical 4 drop down nav menu.
</header>
<nav id="nav_menu">
<ul>
<li>Home</li>
<li>Speakers</li>
<li>Luncheons</li>
<li>Get Tickets</li>
<li class="lastitem">About Us
<ul>
<li>Our History</li>
<li>Board of Directors</li>
<li>Past Speakers</li>
<li>Contact Information</li>
</ul>
</li>
</ul>
</nav>
AND THEN THE CSS BELOW. I am confident that the html is correct I believe my trouble is in the CSS..
#nav_menu ul{
list-style-type: none;
position: realative;}
#nav_menu ul li {float: left;}
#nav_menu ul ul {
display: none;
position: absolute;
top: 100%;
}
#nav_menu ul ul li{float: none;}
#nav_menu ul li:hover > ul{
display: block; }
#nav_menu > ul::after{
content: "";
display: block;
clear: both;}
#nav_menu ul li a {
text-align: center;
display: block;
width: 160px;
padding: 1em 0;
text-decoration: none;
background-color: #800000;
color: white;
font-weight: bold;}
#nav_menu ul li a.lastitem{border-right:none;}
#nav_menu ul li a.current {color: yellow;}

Answer 1

I did some cleanup in your code and the main problem was the typo in position: relative; on the #nav_menu ul element. Therefore the dropdown was out of the visible screen. See the working example below.
#nav_menu ul{
list-style-type: none;
position: relative;
}
#nav_menu ul li {
float: left;
}
#nav_menu ul ul {
display: none;
position: absolute;
top: 100%;
}
#nav_menu ul ul li{
float: none;
}
#nav_menu ul li:hover > ul {
display: block;
}
#nav_menu > ul::after{
content: "";
display: block;
clear: both;
}
#nav_menu ul li a {
text-align: center;
display: block;
width: 160px;
padding: 1em 0;
text-decoration: none;
background-color: #800000;
color: white;
font-weight: bold;
}
#nav_menu ul li a.lastitem{
border-right:none;
}
#nav_menu ul li a.current {
color: yellow;
}
<nav id="nav_menu">
<ul>
<li>Home</li>
<li>Speakers</li>
<li>Luncheons</li>
<li>Get Tickets</li>
<li class="lastitem">About Us
<ul>
<li>Our History</li>
<li>Board of Directors</li>
<li>Past Speakers</li>
<li>Contact Information</li>
</ul>
</li>
</ul>
</nav>