Question

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({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;
}

Answer 1

尝试删除悬空逗号：

$('ul', this).animate({opacity: "show", }, "slow");

所以它是：

$('ul', this).animate({opacity: "show"}, "slow");

如果它不起作用，那么确保IE没有以怪癖模式呈现您的页面或使用旧的呈现引擎通过以下方式启动您的HML：

<!doctype html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

Answer 2

尝试使用.find（）而不是$（'ul'，this）

示例 $（本）.find（ 'UL'）动画（等）;

这是使用示例的js小提琴的链接。它似乎做你想做的事，并在ie8中工作。

http://jsfiddle.net/Nnx5Z/2/

希望这会有所帮助！

Jquery悬停效果在IE中不起作用

2 个答案: