サイトを継承し、ナビゲーションを変更しています。私のページでは、ドロップ ダウン リストのネストされたリスト項目間に異常なスペースが表示されている 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;
}
IE でホバーを機能させるための小さな JS:
$(document).ready(function(){
$('ul#midnav li').hover(
function(){
$(this).addClass("hover");
},
function(){
$(this).removeClass("hover");
}
);