при наведении на родитель не показывает детей

Question

Я создал вертикальное навигационное меню.Пожалуйста, смотрите мой ниже HTML, CSS и JQuery.Когда я нахожу на ссылку, она меняет цвет ссылки, но не показывает, что это дочернее div 'подменю'.Может ли кто-нибудь помочь мне выяснить, что происходит не так?Заранее спасибо.

HTML

<span class="nav-menu-list">
    <ul>
        <li><a href="#"><h2>Home</h2></a>
            <span class="sub-menu"><img src="images/home-preview.png" /></span>
        </li>
        <li><a href="#"><h2>Category</h2></a>
            <span class="sub-menu">
                <div><a href="#"><h4>Category 1</h4></a></div>
                <div><a href="#">Category 2</h4></a></div>
            </span>
        </li>
        <li><a href="#"><h2>About us</h2></a></li>
    </ul>
</span>
<span class="nav-menu-list-details">some content</span>

CSS

.nav-menu-list {
    position: absolute;
    height: 100%;
    left: 0;
    background: rgba(7, 88, 157, .75 );
    z-index: 999;
}
.nav-menu-list ul {
    padding: 150px;
}
.nav-menu-list ul li {
    display: none;
    color: #fff;
    text-transform: uppercase;
}
.nav-menu-list ul li .sub-menu {
    display: none;
    position: absolute;
    top: 120px;
    left: 40%;
}

.nav-menu-list-details {
    position: absolute;
    height: 100%;
    right: 0;
    background: rgba(7, 88, 157, .97);
    z-index: 998;
}

jquery

$('.nav-menu-list ul li a').hover(function(){
    $(this).css({'color':'#F8971D'});
    $(this).children('sub-menu').show();
},function(){   
    $(this).css({'color':'#fff'});
    $(this).children('sub-menu').hide();
});

Answer 1

Измените JQuery следующим образом:

$('.nav-menu-list ul li a').hover(function(){
    $(this).css({'color':'#F8971D'});
    if( $(this).next('span.sub-menu').length > 0 ) {
        $(this).next('span.sub-menu').show();
    }
},function(){   
    $(this).css({'color':'#fff'});
    if( $(this).next('span.sub-menu').length > 0 ) {
        $(this).next('span.sub-menu').hide();
    }
});