jquery 导航nav下拉

<ul class="x-menu clearfix">
    <!--{foreach $app->nav->lists() as $volist}-->
    <li>
        <a href="<!--{$volist.linkurl}-->" <!--{if $volist.target=='_blank' }-->target='_blank'<!--{/if}-->><!--{$volist.cname}--></a>
        <!--{if !empty($volist.content_model)}-->
        <!--{if $volist.content_model == 'page'}-->
        <!--{if empty($app->page->lists($volist.content_model_id))}-->
        <!--{else}-->
        <ul class="x-sub-menu">
           <!--{foreach $app->page->lists($volist.content_model_id) as $seclist}-->
           <li><a href="<!--{$seclist.url}-->" <!--{if $seclist.target=='_blank' }-->target='_blank'<!--{/if}-->><!--{$seclist.title}--></a></li>
           <!--{/foreach}-->
        </ul>
        <!--{/if}-->
        <!--{else}-->
        <!--{if empty($app->category->lists($volist.content_model, $volist.content_model_id))}-->
        <!--{else}-->
        <ul class="x-sub-menu">
            <!--{foreach $app->category->lists($volist.content_model, $volist.content_model_id) as $seclist}-->
            <li><a href="<!--{$seclist.url}-->" <!--{if $seclist.target=='_blank' }-->target='_blank'<!--{/if}-->><!--{$seclist.cname}--></a></li>
            <!--{/foreach}-->
        </ul>
        <!--{/if}-->
        <!--{/if}-->
        <!--{else}-->
        <!--{if !empty($volist.child)}-->
        <ul class="x-sub-menu">
            <!--{foreach $volist.child as $seclist}-->
            <li><a href="<!--{$seclist.linkurl}-->" <!--{if $seclist.target=='_blank' }-->target='_blank'<!--{/if}-->><!--{$seclist.cname}--></a></li>
            <!--{/foreach}-->
        </ul>
        <!--{/if}-->
        <!--{/if}-->
    </li>
    <!--{/foreach}-->
</ul>

<script type="text/javascript">
    $(function() {
        $(".x-menu>li").hover(function() {
            $(this).find('.x-sub-menu').stop(true).slideDown(300);
        }, function() {
            $(this).find('.x-sub-menu').stop(true).slideUp(300);
        });
    });
</script>

.x-menu{position:static}
.x-menu>li{float:left;position:static;margin:0 .15vw}
.x-menu>li>a{display:block;padding:0 .8vw;font-size:16px;color:#fff;line-height:50px;height:50px}
.x-menu>li:hover>a{color:#fe9900;font-weight:700}
.x-menu>li.active>a{color:#fe9900;font-weight:700}
.x-sub-menu{display:none;position:absolute;top:100%;left:0;z-index:999;background:rgba(0,172,142,.9);border-top:1px solid rgba(255,255,255,.42);padding:25px 10px;width:100%}
.x-sub-menu>li>a{display:block;text-align:center;font-size:14px;color:#333;line-height:1.5;padding:.5em}
.x-sub-menu>li>a:hover{background:#e9eaeb}