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!