drop down navigation menu html5

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><a href="index.html" class="current">Home</a></li>
             <li><a href="speakers.html">Speakers</a></li>
             <li><a href="luncheons.html">Luncheons</a></li>
             <li><a href="tickets.html">Get Tickets</a></li>
             <li class="lastitem"><a href="aboutus.html">About Us</a>
                <ul>
                    <li><a href="#">Our History</a></li>
                    <li><a href="#">Board of Directors</a></li>
                    <li><a href="#">Past Speakers</a></li>
                    <li><a href="#">Contact Information</a></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><a href="index.html" class="current">Home</a></li>
    <li><a href="speakers.html">Speakers</a></li>
    <li><a href="luncheons.html">Luncheons</a></li>
    <li><a href="tickets.html">Get Tickets</a></li>
    <li class="lastitem"><a href="aboutus.html">About Us</a>
      <ul>
        <li><a href="#">Our History</a></li>
        <li><a href="#">Board of Directors</a></li>
        <li><a href="#">Past Speakers</a></li>
        <li><a href="#">Contact Information</a></li>
      </ul>
    </li>
  </ul>
</nav>