一个jQuery下拉菜单，代码简单

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("ul.subnav").parent().append("<span></span>"); 
    
    $("ul.topnav li span").click(function() { 
        $(this).parent().find("ul.subnav").slideDown('fast'); 
        $(this).parent().hover(function() { 
        }, function(){    
            $(this).parent().find("ul.subnav").slideUp('slow'); 
        }); 
    
        }).hover(function() { 
            $(this).addClass("subhover"); 
        }, function(){    //On Hover Out 
            $(this).removeClass("subhover"); 
    }); 
}); 
</script>

下面是html代码：

<div id="header"> 
        
        <ul class="topnav"> 
            <li><a href="#">首页</a></li> 
            <li> 
                <a href="#">原创作品</a> 
                <ul class="subnav"> 
                    <li><a href="#">绘画艺术</a></li> 
                    <li><a href="#">平面设计</a></li> 
                    <li><a href="#">交互设计</a></li> 
                    <li><a href="#">3D艺术</a></li> 
                    <li><a href="#">摄影艺术</a></li> 
                    <li><a href="#">其他艺术</a></li> 
                </ul> 
            </li> 
            <li> 
                <a href="#">设计素材</a> 
                <ul class="subnav"> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                </ul> 
            </li> 
            <li> 
                <a href="#">佳作欣赏</a> 
                <ul class="subnav"> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                    <li><a href="#">Sub Nav Link</a></li> 
                </ul> 
            </li> 
            <li><a href="#">论坛</a></li> 
            <li><a href="#">网址导航</a></li> 
        </ul> 
    </div>

更多一个jQuery下拉菜单，代码简单，适合新手阅读。相关文章请关注PHP中文网！

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理