wordpress main nav dropdown fix

HTML

<div class='main-navigation'>
<ul>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-23"><a href="#!">About Us</a>
<ul class="sub-menu">
	<li id="menu-item-236" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-236"><a href="">Menu Item</a></li>
	<li id="menu-item-237" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-237"><a href="">Menu Item</a></li>
	<li id="menu-item-238" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-238"><a href="">Menu Item</a></li>
	<li id="menu-item-239" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-239"><a href="">Menu Item</a></li>
	<li id="menu-item-240" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-240"><a href="">Menu Item</a></li>
	<li id="menu-item-241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-241"><a href="">Menu Item</a></li>
	<li id="menu-item-242" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-242"><a href="">Menu Item</a></li>
</ul>
</li>
</ul>
</div>

CSS

.main-navigation ul ul {
  display:block;
}
.main-navigation ul ul a:before {
  display:none;
}
.main-navigation ul ul a:hover {
  background: rgba(0, 0, 0, 0.88);
}
.main-navigation ul ul a {
    width: 240px;
    display: block;
    background: rgba(27, 56, 99, 0.88);
    color: #FFF;
    font-weight: normal;
    padding: 16px 16px;
}