这是我的页面 HTML。下面是我的主要导航样式的 CSS。IE7 不显示填充、悬停或下拉项。IE8 填充很好，悬停有效，但不显示下拉菜单。我的代码可能是一团糟——可能有很多不必要的东西。我一直在尝试各种建议，但无济于事。所以有人愿意花时间帮我解决导航问题吗？我将非常感激！我希望对于比我知识渊博的人来说，这里有一些明显的东西。这里是现场直播。http://www.tortolasportsclub.com/ 另外，我的动画的下层海报图像加载滚动条（Adobe Edge Animate）。不知道那里发生了什么。也一直无法找到解决方案。
<!doctype html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
<link href="css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/respond.min.js"></script>
</head>
<body id="home">
<div class="gridContainer clearfix">
<div id="header">
<div id="logo"><img src="images/logo.jpg"></div>
<div id="register">
<span class="button"></span>
</div>
</div>
<div id="nav">
<ul id="menu">
<li><a href="index.html" id="homemenu">Home</a> </li>
<li><a href="about/index.html" id="aboutmenu">About</a>
<ul>
<li><a href="about/committee.html">Committee Members</a></li>
</ul>
</li>
<li><a href="sports/index.html" id="sportsmenu">Sports</a>
<ul>
<li><a href="sports/squash.html">Squash</a> </li>
<li><a href="sports/tennis.html">Tennis</a></li>
<li><a href="sports/gym.html">Gym</a></li>
<li><a href="sports/multipurpose.html">Multipurpose</a></li>
<li><a href="sports/junior-programs.html">Junior Programs</a></li>
</ul>
</li>
<li><a href="clubhouse/index.html" id="clubhousemenu">Clubhouse</a>
<ul>
<li><a href="clubhouse/menu.html">Restaurant Menu</a></li>
<li><a href="news/events.html">Events</a></li>
<li><a href="clubhouse/staff.html">Staff</a></li>
</ul>
</li>
<li><a href="news/index.html" id="newsmenu">News</a>
<ul>
<li><a href="news/events.html">Events</a></li>
<li><a href="news/news.asp">Submit News</a></li>
</ul>
</li>
<li><a href="sponsors/index.html" id="sponsorsmenu">Sponsors</a>
<ul>
<li><a href="sponsors/become-a-sponsor.html">Become a Sponsor</a></li>
</ul>
</li>
<li><a href="contact.asp" id="contactmenu">Contact</a></li>
</ul>
</div>
<div id="figure"><object id="bannerframe" data="animation/tsc-index-banner.html" width="100%" height="100%"><embed href="tsc-index-banner.html" width="100%" height="100%"></embed></object>
<div id="blktxtbar"></div>
</div>
<div id="section">
<div id="article1"></div>
<div id="article3"></div>
</div>
<div id="footer-nav"></div>
<div id="footer-nav2"></div>
<div id="footer-co"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="js/selectnav.min.js"></script>
<script>selectnav('menu'); </script>
<script type="text/javascript" language="javascript">
$(function() {
var resizeObject = function() {
var object = $('#bannerframe');
var width = object.width();
var ratio = 350.0 / 960.0;
var height = Math.floor(width * ratio) + 'px';
object.height(height);
};
$(window).resize(resizeObject);
resizeObject();
});
</script>
</body>
</html>
#nav {
clear: both;
float: left;
margin: 0;
padding: 0;
width: 100%;
background: #FFF;
display: block;
position: relative;
margin-top: 0px;
font: 1.1em Tahoma, Geneva, sans-serif;
}
#nav ul {
clear:left;
float:right;
list-style:none;
margin:0;
padding:0;
position:relative;
right: 50%;
text-align:center;
}
#nav ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
width: 6.5em;
cursor: pointer;
text-align: center;
white-space: nowrap;
font-size: 100%;
font-weight: bold;
padding-top: 2px;
padding-bottom: 2px;
background: #FFF;
}
#nav ul li a {
color: #FFF;
display:block;
right: 50%;
text-align: center;
text-decoration: none;
border:1px solid #224b09;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-right: 1px;
background-color: #36780f;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36780f), color-stop(100%, #005900));
background-image: -webkit-linear-gradient(top, #36780f, #005900);
background-image: -moz-linear-gradient(top, #36780f, #005900);
background-image: -ms-linear-gradient(top, #36780f, #005900);
background-image: -o-linear-gradient(top, #36780f, #005900);
background-image: linear-gradient(top, #36780f, #005900);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#36780f, endColorstr=#005900);
padding: 10px 5px;
}
#nav ul li.active a {
color: #FFFFFF;
background-color: #4ba614;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4ba614), color-stop(100%, #030));
background-image: -webkit-linear-gradient(top, #4ba614, #030);
background-image: -moz-linear-gradient(top, #4ba614, #030);
background-image: -ms-linear-gradient(top, #4ba614, #030);
background-image: -o-linear-gradient(top, #4ba614, #030);
background-image: linear-gradient(top, #4ba614, #030);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#4ba614, endColorstr=#030);
display: block;
padding: 10px 5px;
}
#nav ul li:hover a, #nav ul li.hover a /* This line is required for IE 6 and below */{
color: #FFF;
background-color: #36780f;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36780f), color-stop(100%, #000));
background-image: -webkit-linear-gradient(top, #36780f, #000);
background-image: -moz-linear-gradient(top, #36780f, #000);
background-image: -ms-linear-gradient(top, #36780f, #000);
background-image: -o-linear-gradient(top, #36780f, #000);
background-image: linear-gradient(top, #36780f, #000);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#36780f, endColorstr=#000);
}
#nav ul ul {
display: none;
position: absolute;
top: 3em;
left: 1;
padding-top: 0px;
opacity: 1;
right: auto;
font-size: .9em;
width: auto;
padding-top: 0px;
padding-bottom: 0px;
z-index: 1;
}
#nav ul ul li {
padding-top: 0px;
opacity: 0.9;
left: auto;
margin: 0;
clear: left;
width: 100%;
font-size: 0.9em;
padding-top: 0px;
padding-bottom: 0px;
}
#nav ul ul li a,
#nav ul li.active li a,
#nav ul li:hover ul li a,
#nav ul li.hover ul li a { /* This line is required for IE 6 and below */
color: #FFF;
background-color: #36780f;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36780f), color-stop(100%, #005900));
background-image: -webkit-linear-gradient(top, #36780f, #005900);
background-image: -moz-linear-gradient(top, #36780f, #005900);
background-image: -ms-linear-gradient(top, #36780f, #005900);
background-image: -o-linear-gradient(top, #36780f, #005900);
background-image: linear-gradient(top, #36780f, #005900);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#36780f, endColorstr=#005900);
text-align: left;
line-height:1.4em;
border-bottom:1px solid #000;
display: block;
}
#nav ul ul li a:hover,
#nav ul li.active ul li a:hover,
#nav ul li:hover ul li a:hover,
#nav ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
font-size:1em;
color: #FFF;
background-color: #36780f;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36780f), color-stop(100%, #000));
background-image: -webkit-linear-gradient(top, #36780f, #000);
background-image: -moz-linear-gradient(top, #36780f, #000);
background-image: -ms-linear-gradient(top, #36780f, #000);
background-image: -o-linear-gradient(top, #36780f, #000);
background-image: linear-gradient(top, #36780f, #000);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#36780f, endColorstr=#000);
text-align: left;
display: block;
}
#nav ul ul.last {
left:auto;
right:0;
}
#nav ul li:hover ul,
#nav ul li.hover ul { /* This line is required for IE 6 and below */
display:block;
}