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

Question

这是在 jquery 中制作的简单下拉菜单，我需要在没有 jQuery 的常规 JavaScript 中制作它。有人可以帮我做吗，我缺乏经验。

这是现场示例http://jsfiddle.net/qRBuN/它具有多级导航，但我不需要它，只需一个简单的下拉菜单，也不需要动画。

<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>