Javascript 模板的动画下拉菜单

我以前从未使用过jQuery，我正在尝试做一些非常简单的事情，但这让我抓狂。 我已经设计了一个CMS的模板，现在我想得到它的菜单动画。 下图说明了菜单的结构（显然是由CMS生成的）

下面的代码是我认为应该有效的代码，但它没有：

var menuItem = jQuery(".menu:first>li");
var subMenu;
for(var i=0; i<menuItem.length;i++)
{
    var li = jQuery(menuItem[i]);
    subMenu = li.children("ul");
    if (subMenu.length)
        li.hover(function(){ li.children("ul").slideToggle(250); });   
}

var menuItem=jQuery（“.menu:first>li”）；
var子菜单；
对于（var i=0；i来说，你试图实现的目标看起来相当复杂。我会这样做

$(".menu > li").hover(

  //When mouse is over the menu button
  function () {
    $(this).children("ul").slideDown(250);
  },

  //When mouse leaves the menu / menu button 
  function () {
    $(this).children("ul").slideUp(250);
  }
);

我知道您在代码中试图做些什么，但我认为您应该首先从良好的jQuery实践开始。您将看到，这并不难。这将使您的生活变得更加轻松

首先，我不确定这里是否需要循环。jQuery提供了一个选择器（可以与$一起用作快捷方式）来选择类，它非常强大。
按如下方式构建菜单（有点）：

在其悬停功能中，使用

$(this).childen('ul')

然后基本上玩得开心！
如果有人能提出另一种方法，我会非常感激！该死！我自己刚刚发现了！谢谢你的回答。真的很感激。为什么我的代码不管用？！
$('.menu-item')

$(this).childen('ul')