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 的 fiddle : 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);  
   });  

});