MyBB Community Forums

Hi! I was working on a navigation menu and mostly got everything up to par, but the one thing that's tripping me up is the dropdown aspect (in my attempt to apply to the welcome block member template). I already followed several tutorials, but nothing is either clicking, or perhaps, I'm missing some critical element I'm overlooking. 

In short, how to do a proper dropdown menu?

Here's the html + CSS code 

<div id="container">
	<a name="top" id="top"></a>
<div id="headerbar">
	<div class="menu-wrap">
		<div class="usermenu">
			<ul>
				<li><a href="#"><i class="fas fa-home"></i> Home</a></li>
				<li><a href="#">Forum</a></li> 
				<li><a href="#"><i class="fas fa-users"></i> Member</a></li>
				<li><a href="#"><i class="fas fa-spinner"></i> Who's Online</a></li>
				<li><a href="#"><i class="fas fa-calendar-alt"></i> Calendar</a></li>
				<li><a href="#"><i class="fas fa-search"></i> Search</a></li>
				<li><a href="#"><i class="fas fa-tools"></i> Help</a></li>
				<ul class="rightmenu">
					{$usercplink}
					{$pmslink}
					{$myalerts_headericon}
				</ul>
			</ul>
		</div>
	</div>
</div>
	<div id="header">
		<div id="logo">
			<div class="header_wrapper">
				<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
			</div>
		</div>
		<div id="panel">
			<div class="upper">
				<div class="wrapper">
					{$quicksearch}
					{$welcomeblock}
					{$searchlink}
					<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
					<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
				</div>
			</div>
		<div id="content">
			<div class="wrapper">
				{$pm_notice}
				{$remote_avatar_notice}
				{$bannedwarning}
				{$bbclosedwarning}
				{$modnotice}
				{$pending_joinrequests}
				{$awaitingusers}
				<navigation>
				<br />

#headerbar {
    background: #7ba1bb;
    height: 45px;
    line-height: 45px;
    z-index: 4;
}

.menu-wrap {
    margin: 0 auto;
}

.usermenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.usermenu ul li {
    padding: 0px 5px;
    display: inline-block;
}

.usermenu ul li a {
    display: block;
    padding: 0;
    text-decoration: none;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 5px;
    position: relative;
    z-index: 1;
}

.usermenu ul li a,.usermenu ul li a:after,.usermenu ul li a:before {
    transition: all .5s;
}

.usermenu ul li a:hover,
.navbar .dropdown {
    color: #0d0d0d;
}

.usermenu ul li a:hover:after {
    opacity: 1;
    visibility: visible;
    height: 100%;
}

.rightmenu {
    float: right;
}

EDITED:

Manage to figure it out!