Javascript 用于多个菜单的Rails jquery下拉菜单

我对jquery非常陌生，在它（和javascript）方面相当笨。经过几个小时的搜索，我找到了一个创建下拉菜单的简单方法。它的工作发现，除了它将只适用于一个父项，我需要能够创建一个以上的下拉菜单与它，所以我希望有人可以指向我的正确方向，编辑代码，使它的工作

以下是我所拥有的：

jquery代码：

$(document).ready(function () {
    $('#dropdown').hover(         
        function () {
            //change the background of parent menu              
            $('#dropdown li a.parent').addClass('hover');

            //display the submenu
            $('#dropdown ul.children').show();                 
        },

        function () { 
            //change the background of parent menu
            $('#dropdown li a.parent').removeClass('hover');            

            //display the submenu
            $('#dropdown ul.children').hide();                 
        }         
    );         
});

菜单标记：

<ul id="dropdown">
    <li><a href="#" class="parent">Searches</a> 
        <ul class="children">
            <li><%= link_to 'search1', path1 %></li>
            <li><%= link_to 'search2', path2 %></li>
            ...
        </ul>
    </li>

    <li><a href="#" class="parent">UPCs</a> 
        <ul class="children">
            <li><%= link_to 'search1', path1 %></li>
            <li><%= link_to 'search2', path2 %></li>
        </ul>
    </li>
</ul> <!-- id dropdown end tag -->

...

现在，将鼠标悬停在任一元素（搜索或UPCs）上，当然会生成一个包含所有子元素的菜单。这个想法是为了能够在每一位家长的指导下产生孩子

谢谢

PS 如果有人有一个简单、更好的方法（也许是一个真正有效的插件），我也很高兴听到这个消息。我真的需要一些简单的东西，我不想为此而学习javascript（这就是为什么我首先离开PHP进入Rails的原因之一）

我意识到一个简单的方法是创建两个（或更多）不同的

等列表，但我不知道如何将正确的列表传递给jquery函数，也不知道如何处理只为

下拉列表编写的CSS尝试以下方法：

$(document).ready(function () {
    $('.dropdown li').hover(         
        function () {             
            $(this).addClass('hover');
            $('> ul.children', $(this)).show();                 
        },

        function () { 
            $(this).removeClass('hover');            
            $('> ul.children', $(this)).hide();                
        }         
    );         
});

它将适用于具有class
下拉列表的每个元素

但是您可以使用
CSS
而不使用
jQuery
：

.dropdown li ul {
    display: none;
}
.dropdown li:hover > ul {
    display: block;
}

但它在旧版本的Internet Explorer中不起作用
对不起，这在我的页面上根本不起作用，我没有任何菜单，甚至没有第一个菜单。还有什么我需要改变的吗？我用您在答案中键入的内容替换了.js文档中的所有代码。您是否将
更改为
（或
？啊，我没有注意到从ID到类的变化。现在它可以工作了，但我的问题是子菜单总是出现在第一个菜单下面，我需要它出现在每个菜单下面。有什么方法可以做到这一点吗？只需为每个菜单添加class
下拉列表（
，
etc）