HTML

一级菜单：#nav-menu li.stmenu,二级菜单.children，默认全部二级菜单隐藏

<div id="nav-menu">
    <ul class="menu">
        <li class="stmenu"><h3><a href="https://jy.tp.yuanmeng.life/js" class="xialaguang"><span>网站首页</span></a></h3></li>
        <li class="stmenu">
            <h3><a href="https://jy.tp.yuanmeng.life/js" class="xialaguang"><span>网页教程</span></a></h3>    
            <ul class="children">    
                <li><h3><a href="https://jy.tp.yuanmeng.life/js"><span>基础知识</span></a></h3></li>
                <li><h3><a href="https://jy.tp.yuanmeng.life/js"><span>优秀教程</span></a></h3></li>
            </ul>
        </li>
        <li class="stmenu">
            <h3><a href="https://jy.tp.yuanmeng.life/js" class="xialaguang"><span>网页特效</span></a></h3>    
            <ul class="children">    
                <li><h3><a href="https://jy.tp.yuanmeng.life/js"><span>焦点图</span></a></h3></li>
                <li><h3><a href="https://jy.tp.yuanmeng.life/js"><span>常用代码</span></a></h3></li>
            </ul>
        </li>
        <li class="stmenu"><h3><a href="https://jy.tp.yuanmeng.life/js" class="xialaguang"><span>设计欣赏</span></a></h3></li>
        <li class="stmenu"><h3><a href="https://jy.tp.yuanmeng.life/js" class="xialaguang"><span>素材</span></a></h3></li>
    </ul>
</div>

jQuery

悬浮一级菜单hover事件

$('#nav-menu .menu > li').hover(function() {
    $(this).find('.children').animate({opacity: 'show', height: 'show'}, 200);
    $(this).find('.xialaguang').addClass('navhover');
}, function() {
    $('.children').stop(true, true).hide();
    $('.xialaguang').removeClass('navhover');
});