自动禁用菜单项

Question

我的主页上有一个菜单栏，当我点击菜单项时，它将显示该菜单中的列表。直到我按下主页中的其他位置，菜单列表将保持不变。 当我按下页面中的某个位置时，只有下拉菜单列表会消失。

我希望在按下菜单项列表后立即消失。我怎样才能做到这一点。 我非常感谢你的时间。 提前谢谢。

我试过这个：

     <li class="menu">Initialization
            <ul class="links">
                                <%--<li><a href="refresh.jsp" target="first">Refresh</a></li>--%>
                                    <li><a href="programme_mang.jsp" target="first"> Programme Management</a></li>
                                    <li><a href="subject_database.jsp" target="first">Subject Database</a></li>
                <li><a href="faculty_database.jsp" target="first">Faculty Database</a></li>
                                    <%--<li><a href="cFile.jsp" target="first">Load Curriculum</a></li>
                                    <li><a href="addSubject.jsp" target="first">Add Subject</a></li>
                                    <li><a href="addFaculty.jsp" target="first">Add Faculty</a></li>
                                    <li><a href="deleteSubject.jsp" target="first">Delete Subject</a></li>
                                    <li><a href="deleteFaculty.jsp" target="first">Delete Faculty</a></li>--%>
                                    <li><a href="phd_electives.jsp" target="first">Ph.D electives</a></li>
                                    <li><a href="astaff5.jsp" target="first">Grade Formula</a></li>

            </ul>
        </li>

编辑：

JS：

        window.addEvent('domready', function(){
    $('drop_down_menu').getElements('li.menu').each( function( elem ){
        var list = elem.getElement('ul.links'); 
        var myFx = new Fx.Slide(list).hide();           
        elem.addEvents({
            'mouseenter' : function(){                  
                myFx.cancel();
                myFx.slideIn();                 
            },
            'mouseleave' : function(){ 
                myFx.cancel();
                myFx.slideOut();                    
            }
        }); 
    })
});