javascript - シンプルなドロップダウン メニューを jQuery から純粋な JavaScript に変換する

Question

これは jquery で作成された単純なドロップダウン メニューです。jQuery を使用せずに通常の JavaScript で作成する必要があります。誰かが私が経験不足であることを手伝ってくれますか.

ここにライブの例がありますhttp://jsfiddle.net/qRBuN/マルチレベルのナビゲーションがありますが、必要はありません.1つの単純なドロップダウンだけで、アニメーションも必要ありません.

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