Bootstrap dropdowns menus appearing behind other DIV's - html

Question

I'm using Bootstrap v3.3.6
So I'm using their 'dropdown-menu' on my 'top-box' div to display submenu.
But for some reason 'dropdown-menu' are appearing behind the 'header-brand' DIV on my site.
I added z-index to my CSS, but still doesn't seem to do anything, Please help.
Here is My Project URL: Click Here
<header id="header">
<!-- BEGIN TOP BAR -->
<div class="top-box animatedq fadeInDownq">
<div class="left-bar">
<ul class="list-inline top-contact-info">
<li><i class="fa fa-mobile-phone"></i> 24X7 Contact : [phone]</li>
</ul>
</div>
<div class="right-bar">
<ul class="list-inline top-menu-items" role="navigation">
<li><i class="fa fa-briefcase"></i> Create Wallet</li>
<li><i class="fa fa-sign-in"></i> User Login</li>
<li><i class="fa fa-sign-in"></i> Agent Login</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu submenu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- END TOP BAR -->
<!-- BEGIN BRAND(COMPANY NAME & LOGO) -->
<div class="header-brand">
<div class="logo">
<img src="assets/images/logo.png" alt="Logo">
</div>
<div class="social-icons">
<ul class="icons">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-skype"></i></li>
<li><i class="fa fa-vimeo"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
<!-- END BRAND(COMPANY NAME & LOGO) -->
</header>
CSS Code
.top-box .submenu {
z-index: 9999999999 !important;
border-radius: 0px;
}

Answer 1

As mentioned, remove overflow:hidden from .top-box to stop clipping the content and add the class clearfix to clear the floats of the inner divs.
<div class="top-box animatedq fadeInDownq clearfix">