Edit in JSFiddle

$(document).ready(function() {
    $("ul.menu > li").on('mouseover', function(){
        $(this).find('a').addClass('hover');
        $(this).find('ul.sub-list').show();
    }).on('mouseout',function(){
        $(this).find('a').removeClass('hover');
        $(this).find('ul.sub-list').hide();
    });
});
<ul class="menu">
    <li>
        <a href="#">menu1</a>
            <ul class="sub-list">
                <li class="sub-list-item">sub item</li>
            </ul>
        </li>
    <li>
        <a href="#">menu2</a>
            <ul class="sub-list">
                <li class="sub-list-item">sub item</li>
            </ul>
        </li>
    <li>
        <a href="#">menu3</a>
            <ul class="sub-list">
                <li class="sub-list-item">sub item</li>
            </ul>
        </li>
    <li>
        <a href="#">menu4</a>
            <ul class="sub-list">
                <li class="sub-list-item">sub item</li>
            </ul>
        </li>
    <li>
        <a href="#">menu5</a>
            <ul class="sub-list">
                <li class="sub-list-item">sub item</li>
            </ul>
        </li>
</ul>
ul.menu { 
    float:left; 
    font-size:14px; 
    letter-spacing: -0.04em;
    margin-left:20px;
    li { 
        float:left; 
        position: relative;
        z-index: 2;
        a { 
            display:block; 
            color:#353535; 
            text-decoration:none; 
            padding:10px 0px;
            width:100px;
            height:20px;
            text-align:center;
        }
        a.hover { 
            color:#6c45c5; 
            border:1px solid #6c45c5;
            border-bottom:none;
            background-color:#fff;
            width:98px;
            height:18px;
            line-height: 16px;
        }
        ul.sub-list{
            display: none;
            border:1px solid #6c45c5;
            width:100%;
            position:absolute;
            top: 38px;
            left: 0px;
            padding:10px;
            background-color:#fff;
            z-index:-1;
            li.sub-list-item{
                padding-left:18px;
            }
        }
    }
}