jQuery单击事件，不带双下拉菜单

我不熟悉jQuery。我想用click事件创建一个简单的下拉菜单。以下是html结构：

<ul id="menubar">
        <li class="menu">
            <a href="#">Menu 1</a>
            <ul class="submenubar">
                <li class="submenu"><a href="#">Submenu 1</a></li>
            </ul>
        </li>
        <li class="menu">
            <a href="#">Menu 2</a>
            <ul class="submenubar">
                <li class="submenu"><a href="#">Submenu 2</a></li>
            </ul>
        </li>
</ul>​

但下拉列表是重叠的。那不是我想要的。我想要的是： -如果单击菜单1，它将显示子菜单1。其他菜单和子菜单将隐藏。 -然后，如果单击菜单2，子菜单2将显示为隐藏子菜单1。 -等等

---

我该怎么办？有人能帮我解决这个问题吗？感谢您的回复。

嘿，请查看此菜单单击菜单1，它将显示子菜单1，再次隐藏其他。单击菜单1，它将显示菜单2，然后尝试此操作

这对您有什么好处？

$(document).ready(function(){
            $('li.submenu').hide()
            $('li.menu').click(function(e){
                $(this).find('li.submenu', this).slideToggle('fast'); 
                e.stopPropagation();
            })
        })​