Ajuda com Menu DropDown em JavaScript

[gonsales]

Olá, estou desenvolvendo uma página na qual escrevi um menu comum em lista não ordenada e o tornei DropDown com o JavaScript (Segue modelo abaixo).

A minha questão é que quando eu passo o mouse por cima do botão do menu (que está dentro da tag <li>Botão</li>), ele abre a div dropdown, porém, quando eu levo o mouse para dentro desta div que foi aberta em DropDown pelo JavaScript, o Botão (<li>Botão</li>) correspondente à ela no menu, que a abriu, deixa de ficar selecionado (ativo em ":hover" no CSS) e volta às suas características normais, como quando o mouse não está por cima do botão.

Gostaria de saber como faço para manter ativo o botão correspondente à janela dropdown que eu abri no menu e desativá-lo somente quando eu clicar fora do menu, em qualquer outra área do site. Grato desde já pela atenção. Segue abaixo exemplo de como eu escrevi:

<--SCRIPT PARA DROPDOWN-->

<script>
$(document).ready(function(e) {
    $('.sub-menu').hide();
    $('.show-sub-menu').hover(function(){
        $(this).find('.sub-menu').slideDown('fast');
    },function(){
        $(this).find('.sub-menu').slideUp('fast');
    });
});
</script>

<---------------------------------------->

 

<--CSS DO MENU E SUB_MENU-->

.menu_principal{
    width: auto;
    height: 32px;
    float: left;
    text-align: right;
}
.menu_principal ul{
    width: auto;
    height: 31px;
    float: left;
    text-align: left;
    padding: 0px;
    margin-left: 35px;
}
.menu_principal ul li{
    display: inline;
    line-height: 60px;
    list-style-type: none;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    color: #BBB;
    text-transform: none;
}
.menu_principal ul li a{
    line-height: 0px;
    padding: 21px 13px;
    list-style-type: none;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    color: #BBB;
    text-transform: none;
    text-decoration: none;
}
.menu_principal ul li a:hover{
    background-color: #222;
    color: #DDD;
    line-height: 0px;
    padding: 20px 13px;
}

.sub-menu{
    width: 100%;
    height: 285px;
    cursor: default;
    z-index: 7;
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    display: block;    
}

<----------------------------------------->

 

<--HTML DO MENU-->

<div class="menu_principal">
        <ul>
        <li class="show-sub-menu"><a href="#">Item 1</a>
        <div class="sub-menu">
           
        </div>
        </li>
        <li class="show-sub-menu"><a href="#">Item 2</a>
        <div class="sub-menu">
        
        </div>
        </li>
        <li class="show-sub-menu"><a href="#">Item 3</a>
        <div class="sub-menu">
           
        </div>
        </li>
        </ul>
        </div> <!--MENU_PRINCIPAL TERMINA-->

<------------------------->

Editado Outubro 6, 2016 por gonsales
Retirar código desnecessário.