Вообщем очень лениво написал, работает на ура.
$(document).ready(function(){
var menu = $('#h_menu').children().children();
menu.hover(function(){
$(this).find('ul').show(100);
}, function(){
$(this).find('ul').hide(100);
});
$(menu.children('a')).click(function(){
$(this).next().hide();
});
menu.find('ul a').click(function(){
$(this).parent().parent().hide();
});
});
#h_menu {width: 950px; height: 40px;margin: 15px auto 0 auto;text-align: center;}
#h_menu ul{margin: 0; padding: 0;}
#h_menu ul li{display: inline-block; position:relative; margin: 0;}
#h_menu a{display:inline-block;color: black; font-weight: bold; font-size: 14px; text-decoration: none; margin-left: -4px;padding: 12px 12px;}
#h_menu li:hover a{background-color: white;border-radius: 10px;}
/*Горизантальное верхнее ВСПЛЫВАЮЩИЕ меню с градиентом*/
#h_menu ul li ul{display: none;position: absolute;width: 210px !important;border-bottom: 1px solid #f99100;border-left: 1px solid #f99100;border-right: 1px solid #f99100;border-radius: 0 0 10px 10px;z-index: 999;width: 170px;text-align: left;padding-bottom: 3px;}
#h_menu li ul li{display: block;}
#h_menu ul li ul li a{color: #26272b; margin: 0; font-size: 13px;background-color: rgba(0, 0, 0, 0) !important;display: block;padding: 6px 15px;}
#h_menu li li a:hover{background-color: white !important;border-radius: 5px; color: #6d6e72; }
<div id="h_menu">
<ul>
<li><a href=""></a>
<ul class="e_gradient_o" style="margin-left: 0;">
<li><a href="/"></a></li>
<li><a href="/"></a></li>
<li><a href="/"></a></li>
<li><a href="/"></a></li>
</ul>
</li>
<li><a href=""></a>
<ul class="e_gradient_o">
<li><a href="/"></a></li>
<li><a href="/"></a></li>
<li><a href="/"></a></li>
<li><a href="/"></a></li>
</ul>
</li>
<li><a href=""></a>
<ul class="e_gradient_o" style="margin-left: -120px;">
<li><a href="/"></a></li>
<li><a href="/"></a></li>
<li><a href="/"></a></li>
<li><a href="/"></a></li>
</ul>
</li>
</ul>
</div>
