The submenu doesn't show up when hover the mouse - html

Question

I have a problem. I don't know what wrong with the code as when I hover the mouse over 'About us', the submenu didn't show up. I did make the submenu display:none and then when hover, it display: block but nothing happen. Thanks for your help
#nav_menu{
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
#nav_menu li{
float: left;
}
#nav_menu li a{
display: block;
width: 160px;
padding-top: 1em;
padding-bottom: 1em;
text-decoration: none;
background-color: #800000;
color: white;
font-weight: bold;
text-align: center;
}
#nav_menu .current{
color: yellow;
}
#nav_menu #sub_menu{
display: none;
position: absolute;
top: 100%;
list-style: none;
}
#nav_menu #sub_menu:hover{
display: block;
}
#nav_menu #sub_menu li a{
float: right;
}
<ul id="nav_menu">
<li>Home</li>
<li>Speakers</li>
<li>Luncheons</li>
<li>Tickets</li>
<li>About Us
<ul id="sub_menu">
<li>Our History</li>
<li>Board of Directors</li>
<li>Past Speakers</li>
<li>Contact Information</li>
</ul>
</li>
</ul>

Answer 1

My method is a little different and shorter with the animation opening and closing for the submenu, I used the scale instead of display for animation;
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#nav_menu{
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
#nav_menu li{
float: left;
position: relative;
}
#nav_menu li a{
display: block;
width: 160px;
padding-top: 1em;
padding-bottom: 1em;
text-decoration: none;
background-color: #800000;
color: white;
font-weight: bold;
text-align: center;
}
#nav_menu .current{
color: yellow;
}
#nav_menu #sub_menu{
position: absolute;
top: 100%;
list-style: none;
padding: 0;
transform : scaleY(0);
transform-origin: top;
transition: all 0.4s;
}
#nav_menu li:hover #sub_menu{
transform: scaleY(1);
}
#nav_menu #sub_menu li a{
float: right;
}
<ul id="nav_menu">
<li>Home</li>
<li>Speakers</li>
<li>Luncheons</li>
<li>Tickets</li>
<li>About Us
<ul id="sub_menu">
<li>Our History</li>
<li>Board of Directors</li>
<li>Past Speakers</li>
<li>Contact Information</li>
</ul>
</li>
</ul>

Answer 2

To display a submenu when hovering, you need to write like this:
#nav_menu li:hover #sub_menu {
display: block;
}
Because you are accessing the #sub_menu selector. Also, you need to add position: relative the selector #nav_menu li is relevant for the correctness of your position: absolute of the selector #nav_menu #sub_menu. And add padding: 0 for the selector of the same selector #nav_menu #sub_menu, in order to align it under the main menu.
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#nav_menu{
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
#nav_menu li{
float: left;
position: relative;
}
#nav_menu li a{
display: block;
width: 160px;
padding-top: 1em;
padding-bottom: 1em;
text-decoration: none;
background-color: #800000;
color: white;
font-weight: bold;
text-align: center;
}
#nav_menu .current{
color: yellow;
}
#nav_menu #sub_menu{
display: none;
position: absolute;
top: 100%;
list-style: none;
padding: 0;
}
/*#nav_menu #sub_menu:hover{
display: block;
}*/
#nav_menu li:hover #sub_menu{
display: block;
}
#nav_menu #sub_menu li a{
float: right;
}
<ul id="nav_menu">
<li>Home</li>
<li>Speakers</li>
<li>Luncheons</li>
<li>Tickets</li>
<li>About Us
<ul id="sub_menu">
<li>Our History</li>
<li>Board of Directors</li>
<li>Past Speakers</li>
<li>Contact Information</li>
</ul>
</li>
</ul>