Dropdown menu fade in?

Question

I am VERY new at coding and CSS, and all I'd like to do is to make the dropdown menu fade in when I hover over it, instead of appearing suddenly. Here is an example of what I'm looking for:

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

but when I try to apply this script (from the jsfiddle example above) to my wordpress, nothing happens:

jQuery(document).ready(function () {

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

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

I've also tried adding this at the bottom of my my CSS style sheet:

.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;

...to no avail. I've searched and searched and none of the answers I've found are working. I'm probably missing something very obvious and will feel very dumb once you point it out, but I can't for the life of me figure out what it is.

Not sure if you need a different section or not, but here's some of my 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; } 

This is specifically where I'm trying to apply it. This is my Wordpress site, and it's under the "categories" menu item:

www.mirandameeks.com

Thank you so much for your time and help, any ideas you can offer will be greatly appreciated!

Answer 1

You can achieve this by using transition effect from CSS3, like below:

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

No need of script.. Just remove your script and apply this CSS only in your fiddle... It might works..

Note: If you don't need the animation when mouseout from the menu, then use the transition effect only on hover state, like below: this will apply the animation while hover only..

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

Answer 2

In the example fiddle you gave, in this code $(".menu ul li").hover(function() .menu is the class name of a div element, whereas in your page .menu is the class name of ul element. So i this you should you this instead

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

Also change $('#subList').hide(); to $('.sub-menu').hide();