jQuery悬停下拉菜单不适用于CMS

Question

我正在使用 GetSimple CMS，目前正在尝试用 GetSimple 版本的下拉菜单替换旧的静态导航栏。我似乎已经让它工作了，但我遇到了一个问题：我无法让 jQuery 脚本工作。

在我加入 CMS 之前，我有一个基本的子菜单设置：

<ul class = "navbar">
   <li><a>Item</a>
      <ul class="slidedown">
         <li><a>SubItem</a>
      </ul>
   </li>
  <!--Again-->
</ul>

我以.slidedown 为目标，并在我的CSS 中给它一个position:absolute 和display:none，然后运行这个脚本：

$(document).ready(function () {
    $(".navbar li").hover(
  function () {
     $($(this).find(".slidedown")).stop().fadeIn(200);
  }, 
  function () {
     $($(this).find(".slidedown")).stop().fadeOut(300);
  }
);

});

然而，在我包含 CMS 之后，它会将标记更改为基本相同的内容，除了 .slidedown ul 没有类（在本例中为 .slidedown）。所以我想我只是手动定位它，使用.navbar li ul 代替.slidedown 作为选择器。这在我的 CSS 中运行良好，但它破坏了脚本。我假设它是其中的.find() 部分，因为我告诉在悬停时将一些文本放入每个 div 中都有效。当我从 CSS 中删除 display:none 时，菜单也正确显示（尽管是一次）。

这是 CMS 生成的内容和我的脚本/css 的问题： http://jsfiddle.net/R3ndH/1/

有什么办法可以解决吗？

另请注意：我尝试使用我的旧 HTML 标记，不包括 CMS，只是去掉了 .slidedown 类。这也不好用，所以我认为它与 CMS 无关，而与标记/选择器有关。

Answer 1

Here is the fiddle

$(document).ready(function () {

    $('.navbar li').hover(  
   function(){  
      $(this).find('ul').stop().fadeTo('slow', 1);  
   },  
   function(){  
      $(this).find('ul').stop().fadeOut('slow', 0);  
   });  

});