Animate opacity not working

I had a little jQuery dropdown menu that worked when I used fadeIn and fadeOut just fine, so the selectors and the HTML are fine.

However, the fadeIn gives some ugly behavior in IE. I changed the menu to animate the opacity instead of the fadeIn using template code I found here. The only problem is it's not working; Any hints?

$(document).ready(function() {

    $("#nav li").hover(
        function () {
        $(this).children("ul").animate({"opacity": 1});
        },function(){
        $(this).children("ul").animate({"opacity": 0});
    });//hover

});// document ready

HTML

<input type="hidden" name="arav" /><ul id="nav"> 
<li> <a href="index2.html">Home</a> 
</li> 
<li> <a href="personnel.html">Who We Are</a> 
</li> 
<li> <a href="#">Facts</a> 
<ul> 
<li><a href="sci.html">Sci</a></li> 
<li><a href="tbi.html">Tbi</a></li> 
<li><a href="stroke.html">Str</a></li> 
</ul> 
</li> 
<li> <a href="">Education</a> 
<ul> 
<li><a href="healthed.html">Health Education</a></li> 
<li><a href="#">KARRN Materials</a> 
<ul> 
<li><a href="handouts.html">Handouts</a></li> 
<li><a href="presentations.html">Presentations</a></li> 
<li><a href="movies.html">Movies</a></li> 
</ul> 
</li> 

<li><a href="sciinfosheets.html">SCI Info Sheets</a></li> 
</ul> 
</li> 
<li> <a href="stroke.html">Resources</a> 
<ul> 
<li><a href="statelevel.html">State Level</a></li> 
<li><a href="nationallevel.html">National Level</a></li> 
<li><a href="resourcesbycoutny2.html">Community Level</a></li> 
</ul> 
</li> 

<li> <a href="research.html">Research</a></li> 

<li> <a href="contactus.html">Contact Us</a> 
</li> 
</ul>

If Turshar's example does not work, try using fadeTo, I think that works around the IE opacity issue.

$(this).children("ul").fadeTo(500, 1);

and

$(this).children("ul").fadeTo(500, 0);

You do know that $("#nav li") targets every <li> under <ul id="nav">, thus includes all submenus?

What you probably want to do is: $("#nav > li"). Using > in CSS you can tell it that you only want the direct child (thus not children of children etc).

Look here for the documentation and an example: https://api.jquery.com/child-selector/. But you can also search for "CSS selectors" for more information on selecting elements in the document.

Try this :

opacity does not work with IE, you need to change to filter property

$(document).ready(function() {

    $("#nav li").hover(
        function () {
        $(this).children("ul").animate({"opacity": 1});
        $(this).children("ul").animate({"filter":"alpha(opacity=50)"});
        },function(){
        $(this).children("ul").animate({"opacity": 0});
        $(this).children("ul").animate({"filter":"alpha(opacity=0)"});
    });//hover

});