Не корректно работает подменю

Не корректно работает подменю. Необходимо, чтобы при наведении курсора подменю раскрывалось, а получается оно постоянно раскрыто. Не могу сообразить в чем ошибка.

<ul id="dropdown_nav">
    <li><a href="#">Категория</a>
        <ul class="sub-menu">
            <li><a href="#">Подменю #1</a></li>
            <li><a href="#">Подменю #2</a></li>
            <li><a href="#">Подменю #3</a></li>
            <li><a href="#">Подменю #4</a></li>
        </ul>
            <li><a href="#">Категория 1</a></li>
            <li><a href="#">Категория 2</a></li>
            <li><a href="#">Категория 3</a></li>
            <li><a href="#">Категория 4</a></li>
</ul>

CSS:

#dropdown_nav, #dropdown_nav li{
    margin:0;
    padding:0;
    font-weight:bold;
    display:inline-block;
    list-style:none;
    border-bottom:0px solid #777;
    margin-top:18px;
}
#dropdown_nav{
    background:#323232;
}
#dropdown_nav li{
    display:inline-block;
    float:left;
    position:relative;       
}
#dropdown_nav a{
    display:block;
    color:#fff;
    text-decoration:none;
    padding:15px 22px 20px 22px;
    background: url(images/linemenu.png) right no-repeat;
    font-weight:100;
    font-size:18px; 
}
#dropdown_nav li a:hover {
    background: #000;
    text-decoration:none;
    color:#0dbfe5;
}
#dropdown_nav .sub-menu{
    z-index: 4;
    width:180px;
    padding:0px;
    position:absolute;
    top:42px;
    left:0px;
    border:0px solid #ddd;
    border-top:none;
    background: #000;
}
#dropdown_nav .sub-menu li{            
    width:180px;
    padding:0px;
}
#dropdown_nav .sub-menu li a {
    /*background: none;
    font-weight: normal;*/
    font-size:15px;
    display:block;
    border-bottom:0px solid #e5e0b3;
    padding-left:10px;
    color:#fff; 
}
#dropdown_nav .sub-menu li a:hover {
    background:#222;
    color:#0dbfe5;
    text-align:left;
}