我继承了一个网站，我正在更改导航。在我的页面上，我使用了一个 CSS 下拉菜单（在我的例子中是下拉菜单），它显示了下拉列表的嵌套列表项之间的一些不寻常的间距。此外，如果我尝试将鼠标悬停在下拉项目上，当鼠标点击元素之间的空白区域时，列表就会消失。
它在 Chrome、Safari 和 FF 上看起来不错。IE8 似乎是问题所在......我知道我必须正盯着错误而不是看到它。任何帮助表示赞赏。
我的（相关）HTML：
<table cellpadding="0" cellspacing="0" border="0" align="center" width="1000" height="32">
<tr>
<td align="left" valign="top" width="10" height="32"><img src="images/divider1.gif" alt="" width="10" height="32" border="0"></td>
<td align="left" valign="top" width="980" height="32">
<ul id="midnav">
<!-- Accommodations -->
<li onmouseover="acco.src='images/accommodations-on.gif'" onmouseout="acco.src='images/accommodations-off.gif'">
<a href="accommodations/" class="pointer"><img src="images/accommodations-off.gif" alt="Accommodations" width="136" height="32" border="0" id="acco" name="acco"></a>
<ul>
<li>
<img src="images/accom_top_strip.png" width="136" height="24" border="0">
<a href="accommodations/guest-services.cfm" onmouseover="accom_gs.src='images/accom_guest_services_on.png'" onmouseout="accom_gs.src='images/accom_guest_services_off.png'" class="pointer"><img src="images/accom_guest_services_off.png" alt="Guest Services" width="136" height="24" border="0" id="accom_gs" name="accom_gs"></a>
</li>
<li>
<a href="luxury-townhomes.cfm" onmouseover="accom_lth.src='images/luxury_townhomes_on.png'" onmouseout="accom_lth.src='images/luxury_townhomes_off.png'" class="pointer"><img src="images/luxury_townhomes_off.png" alt="Luxury Townhomes" width="136" height="24" border="0" id="accom_lth" name="accom_lth"></a>
</li>
<li>
<a href="three-bedroom-condo.cfm" onmouseover="accom_3bc.src='images/three_bed_condo_on.png'" onmouseout="accom_3bc.src='images/three_bed_condo_off.png'" class="pointer"><img src="images/three_bed_condo_off.png" alt="Three Bedroom Condo" width="136" height="24" border="0" id="accom_3bc" name="accom_3bc"></a>
</li>
<li>
<a href="two-bedroom-condo.cfm" onmouseover="accom_2bc.src='images/three_bed_condo_on.png'" onmouseout="accom_2bc.src='images/two_bed_condo_off.png'" class="pointer"><img src="images/two_bed_condo_off.png" alt="Two Bedroom Condo" width="136" height="24" border="0" id="accom_2bc" name="accom_2bc"></a>
</li>
<li>
<a href="one-bedroom-condo.cfm" onmouseover="accom_1bc.src='images/one_bed_condo_on.png'" onmouseout="accom_1bc.src='images/one_bed_condo_off.png'" class="pointer"><img src="images/one_bed_condo_off.png" alt="One Bedroom Condo" width="136" height="24" border="0" id="accom_1bc" name="accom_1bc"></a>
</li>
<li>
<a href="studio.cfm" onmouseover="accom_studio.src='images/studio_on.png'" onmouseout="accom_studio.src='images/studio_off.png'" class="pointer"><img src="images/studio_off.png" alt="Studio" width="136" height="24" border="0" id="accom_studio" name="accom_studio"></a></li>
</ul>
</li>
</ul>
</td>
<td align="left" valign="top" width="10" height="32"><img src="images/divider2.gif" alt="" width="10" height="32" border="0"></td>
</tr>
</table>
我的 CSS：
/* Main CSS */
ul {
margin-top:13px;
margin-bottom: 20px;
margin-right: 0px;
padding: 0px;
margin-left: 50px;
}
li{
list-style-image: url(../images/bullet.gif);
vertical-align: middle;
color: #9a631b;
margin-bottom: 13px;
line-height: 18px;
padding-left: 30px;
}
/* Mid Page Navigation */
ul#midnav {
margin:0;
padding:0;
height:32px;
width:980px;
position:relative;
z-index:10000;
list-style:none;
font-size:0;
}
ul#midnav li {
list-style-image:none;
float:left;
padding:0;
margin:0;
height:32px;
}
ul#midnav li a {
list-style:none;
display:block;
margin:0;
padding:0;
text-decoration:none;
}
ul#midnav li ul {
list-style:none;
display:none;
margin:0;
padding:0;
font-size:0;
}
ul#midnav li:hover ul, ul#midnav li.hover ul {
list-style:none;
display:block;
position:absolute;
bottom:100%;
margin:0;
padding:0;
z-index:10001;
}
ul#midnav li:hover li, #midnav li.hover li {
list-style-image:none;
float:none;
margin:0;
padding:0;
vertical-align:auto;
line-height:normal;
height:auto;
}
ul#midnav li:hover li a, #midnav li.hover li a {
line-height:none;
}
和一个小 JS 使悬停在 IE 中工作：
$(document).ready(function(){
$('ul#midnav li').hover(
function(){
$(this).addClass("hover");
},
function(){
$(this).removeClass("hover");
}
);