将简单下拉菜单从jQuery转换为纯JavaScript

这是用jquery制作的简单下拉菜单，我需要用常规JavaScript制作它 没有jQuery。有人能帮我吗？我缺乏经验

这是一个活生生的例子，它有多级导航，但我认为它不必有，只需一个简单的下拉列表，它也不需要动画

<script type="text/javascript">
    $(document).ready(function(){
        $("ul.topnav li a").mouseenter(function() {
            $(this).parent().find("ul.subnav").stop(true, true).slideDown('slow').show();

        });  

        $("ul.topnav li.first_level").mouseleave(function(){ 
            $(this).parent().find("ul.subnav").stop(true, true).slideUp('fast');
        });

        $("li.ex_level a").mouseenter(function() {
            $(this).parent().find("ul.ex_subnav").stop(true, true).slideDown('fast').show();
        });

        $(".ex_level").mouseleave(function(){ 
            $(this).parent().find("ul.ex_subnav").stop(true, true).slideUp('fast');
        });
    });

</script>

===

   <ul class="topnav">  
        <li><a href="="#">Home</a></li>  
        <li class="first_level">  
            <a href="="#">One</a>  
            <ul class="subnav">  
                <li><a href="#">One</a></li>  
                <li class="ex_level"><a href="#">Two</a>
                    <ul class="ex_subnav">
                        <li><a href="#">One</a></li>  
                        <li><a href="#">Two</a></li>  
                    </ul>  
                </li>  
                <li><a href="#">Three</a></li>  
                <li><a href="#">Four</a></li>  
            </ul>
        </li>  

        <li class="first_level">  
            <a href="="#">One</a>  
            <ul class="subnav">  
                <li><a href="#">One</a></li>  
                <li><a href="#">Two</a></li> 
            </ul>
        </li> 
        <li><a href="#">Contact</a></li>  
    </ul>      

---

为什么不使用jQuery呢？它有32kB，而且可以很好地缓存。考虑到它带走了多少跨浏览器的疯狂，这绝对是值得的-@杰克，我和杰克在一起。。。除非你是针对拨号用户，否则32kb什么都不是。确保您使用的是缩小版而不是开发版。我假设这就是导致您的100kb大小的原因。实际上，1.7.2缩小版现在看起来是92kb。然而，这对普通人来说并不重要。你想让用户不必下载文件，还是让服务器不必提供文件？另外，搜索Google pagespeed。如果您的网站存在速度问题，请让该工具对其进行分析，这样您就不会做出太多疯狂的猜测