下拉菜单淡入？

Question

我在编码和 CSS 方面非常新，我想做的就是让下拉菜单在我将鼠标悬停在它上面时淡入，而不是突然出现。这是我正在寻找的示例：

http://jsfiddle.net/2yEtK/1/

但是当我尝试将此脚本（来自上面的 jsfiddle 示例）应用到我的 wordpress 时，没有任何反应：

jQuery(document).ready(function () {

        $('#subList').hide();

        $(".menu ul li").hover(function(){
         $(this).children("ul").stop().fadeIn("slow");
   },
   function(){
         $(this).children("ul").stop().fadeOut("slow");   
})
    });

我也尝试在我的 CSS 样式表底部添加这个：

.main-navigation li ul li { 
 opacity:0; 
 transition:opacity 0.3s linear; 
 -webkit-transition:opacity 0.3s linear; 
 -moz-transition:opacity 0.3s linear; 
 -o-transition:opacity 0.3s linear; 
}

.main-navigation li:hover > ul li { 
 opacity:1;

...无济于事。我已经搜索和搜索，但我找到的答案都没有奏效。我可能遗漏了一些非常明显的东西，一旦你指出它就会觉得很愚蠢，但我一生都无法弄清楚它是什么。

不确定您是否需要不同的部分，但这是我的一些 CSS：

.header_menu {  max-width: 1000px; float: left; margin-top: 315px; margin-left: -420px;}
.header_menu ul { list-style-type: none; margin: 0; padding: 0; }
.header_menu ul li { float: left; margin-left: 10px; font-size: 15px; position: relative; text-transform: uppercase; }
.header_menu ul li a { color: #999; text-decoration: none; padding: 4px 15px; display: block;  }
.header_menu ul li.current-menu-item a, 
.header_menu ul li.current_page_item a, 
.header_menu ul li a:hover { background-color: #fff; color: #333; }
.header_menu ul li ul { position: absolute; top: 24px; left: 0; border: 1px solid     #dfdfdf; background-color: #ffffff; padding: 5px 3px; display: none; z-index: 25; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); opacity: 0.95; -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
transition:width 2s, height 2s, background-color 2s, transform 2s; }
.header_menu ul li ul li { width: 140px; font-size: 13px; margin: 0; padding: 3px 0; border-top: 1px solid #efefef; }
.header_menu ul li ul li:first-child { border-top: none; }
.header_menu ul li ul li.current-menu-item a, 
.header_menu ul li ul li.current_page_item a, 
.header_menu ul li ul li a { color: #b2b2b6; background: none; }
.header_menu ul li ul li.current-menu-item a:hover, 
.header_menu ul li ul li.current_page_item a:hover, 
.header_menu ul li ul li a:hover { background: none; color: #000; } 

这正是我试图应用它的地方。这是我的 Wordpress 网站，位于“类别”菜单项下：

www.mirandameeks.com

非常感谢您的宝贵时间和帮助，我们将非常感谢您提供的任何想法！

Answer 1

您可以通过使用 CSS3 的过渡效果来实现这一点，如下所示：

li ul
{
    opacity: 0;
    transition: opacity 1s linear 0s;
    -webkit-transition: opacity 1s linear 0s;
}
li:hover ul
{
    opacity: 1;
}

不需要脚本..只需删除您的脚本并仅在您的小提琴中应用此 CSS...它可能有效..

注意：如果鼠标移出菜单时不需要动画，则仅在悬停状态下使用过渡效果，如下所示：这将仅在悬停时应用动画..

li ul
{
    opacity: 0;
}
li:hover ul
{
    opacity: 1;
    transition: opacity 1s linear 0s;
    -webkit-transition: opacity 1s linear 0s;
}

Answer 2

在您给出的示例小提琴中，在此代码中 $(".menu ul li").hover(function() .menu 是 div 元素的类名，而在您的页面中 .menu 是 ul 元素的类名。所以我这个你应该改为这个

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

还将$('#subList').hide(); 更改为$('.sub-menu').hide();