Jquery Hover Effect Doesn't Work in IE, redux_问答_开发者

Here's to hoping someone else sees this and can help. This snippet of code works in every browser except for IE. The menu doesn't fade in, it just appears and it looks ugly.

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Kentucky Appalachian Rural Rehabilitation Network</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="jquery.js">
</script>
<style type="text/css">


</style>
<script type="text/javascript">
$(document).ready(function () {
$('#nav li').hover(
function () {
//show submenu
$('ul', this).animate(开发者_如何学Python{opacity: "show", }, "slow");

},
function () {
//hide submenu
$('ul', this).fadeOut(250);

}
);


})
</script>
<body><div id="centerColumn">
    <div id="header"></div>

<input type="hidden" name="arav" /><ul id="nav">
<li> <a href="#">Home</a>
</li>
<li> <a href="#">Who We Are</a>
</li>
<li> <a href="#">Other box</a>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
<li> <a href="#">Menu</a>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
<li> <a href="#">Menu</a>
<ul>
<li><a href="#">State Level</a></li>
<li><a href="#">National Level</a></li>
<li><a href="#">Community Level</a></li>
</ul>
</li>

<li> <a href="#">Research</a></li>

<li> <a href="#">Contact Us</a>
</li>
</ul>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class="container">





<div id="footer">
    Footer<a href="#"/>
        </div></div></div></body></html>

css

body {
margin:1em;
padding:0;
height:100%;
background-color:#cccccc;
color:#000000;  
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
border-style: thin;
}

.img{
    float right;
    padding-left: 3em;
    border:thin black ;

}
#reg{font-family:"Palatino Linotype";


}

#centerColumn {
    margin: 0 auto;
    padding: 1em;
    width: 50em;
    text-align: left;
    vertical-align: bottom;
    background-color: #ffffff;
    border: 1px solid #999999;
}


#header {
    border-style: thin;
    background-position: center;
    margin: -1em -1em 0 -1em;
    padding: 0 0 0 0;
    height: 15.5em;
    background-color: #ffffff;

    background-attachment: scroll;
background-repeat:no-repeat; 

}


#footer {
position:relative;
bottom:0;
margin:4em 0 0 0;
padding: 1em 1em 1em 1em;
height:5em;
line-height:4em;
text-align:center;
font-size:.8em;
background-color:#cccccc;
border-top:1px solid #999999;
}

/*****remove the list style****/

#nav {
margin:0;
padding:0;
list-style:none;
}

/*****LI display inline *****/
#nav li {
float:left;
display:block;
width:7em;
background:#0063dc;
position:relative;
z-index:500;
margin:0 1px;
}

/*****parent menu*****/
#nav li a {
display:block;
padding:5px 5px 5px 5px;

font-weight:700;
height:38px;
text-decoration:none;
color:#696969;
text-align:center;
color:#ffeecc;
}

#nav li a:hover
{
color:#eeeeee;
}

/* style for default selected value */ #nav a.selected {
color:#6699FF;
}
/* submenu */ #nav ul
{
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}

#nav ul li
{
width:7em;
float:left;
overflow:hidden;

border-top:1px solid #eeeeee;
}

/* display block will make the link fill the whole area of LI */
 #nav ul a
{
display:block;
height:32px;
padding: 7px 4px;
color:white;
}

#nav ul a:hover
{
text-decoration:none;
padding-left:none;
}

If you are trying to animate between two images, like a hover effect on your navigation, then I suggest using jQuery Blend plugin. It works in IE and is very well developed, I haven't found any bugs in it.