Question

我继承了一个网站，我正在改变导航。在我的页面上，我正在使用CSS下拉（或者在我的情况下放下'up'），它在下拉列表的嵌套列表项之间显示了一些不寻常的间距。此外，如果我尝试将鼠标悬停在下拉项目中，当鼠标点击元素之间的空白区域时，列表将消失。

Aberrant spacing on items

在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");
        }
     );

Answer 1

直到您使用table构建网站，这是一种旧方法。使用DIV可以更好地查看。

IE8中CSS下拉菜单上的奇数间距

1 个答案: