Javascript 下拉图像菜单在IE中无法正常工作

我有一个下拉菜单，可以用较暗的图像切换按钮的图像。我使用HTML和CSS，以及onmouseover/OutJavaScript。我在IE中的问题是，菜单的下拉部分在菜单顶部切换图像，但是图像应该下拉并堆叠在主按钮下方。它在Chrome和Firefox中运行良好，但我无法在IE中工作

我打算添加几张图片，这样你就可以在IE和Chrome中一起看到结果，但我不能。我已经尝试了所有我能想到的，并在网上搜索答案，但找不到

<div id="top_nav">
    <ul>
        <li><a href="Default.aspx">
            <img src="Diversity%20Buttons%202/home.png" onmouseover="this.src='Diversity%20Buttons%202/homeDark.png'" onmouseout="this.src='Diversity%20Buttons%202/home.png'" alt="Home" /></a></li>
        <li><a href="http://www.google.com">
            <img src="Diversity%20Buttons%202/bigfour.png" onmouseover="this.src='Diversity%20Buttons%202/bigfourDark.png'" onmouseout="this.src='Diversity%20Buttons%202/bigfour.png'" alt="Big Four" /></a>
            <ul>
                <li><a href="http://www.google.com">
                    <img src="Diversity%20Buttons%202/glucose.png" onmouseover="this.src='Diversity%20Buttons%202/glucoseDark.png'" onmouseout="this.src='Diversity%20Buttons%202/glucose.png'" alt="Glucose" /></a></li>
                <li><a href="http://www.google.com">
                    <img src="Diversity%20Buttons%202/cholesterol.png" onmouseover="this.src='Diversity%20Buttons%202/cholesterolDark.png'" onmouseout="this.src='Diversity%20Buttons%202/cholesterol.png'" alt="Cholesterol" /></a></li>
                <li><a href="http://www.google.com">
                    <img src="Diversity%20Buttons%202/bloodPressure.png" onmouseover="this.src='Diversity%20Buttons%202/bloodpressureDark.png'" onmouseout="this.src='Diversity%20Buttons%202/bloodpressure.png'" alt="Blood Pressure" /></a></li>
                <li><a href="http://www.google.com">
                    <img src="Diversity%20Buttons%202/bmi.png" onmouseover="this.src='Diversity%20Buttons%202/bmiDark.png'" onmouseout="this.src='Diversity%20Buttons%202/bmi.png'" alt="BMI" /></a></li>
            </ul>
        </li>
        <li><a href="http://www.google.com">
            <img src="Diversity%20Buttons%202/tobacco.png" onmouseover="this.src='Diversity%20Buttons%202/tobaccoDark.png'" onmouseout="this.src='Diversity%20Buttons%202/tobacco.png'" alt="Tobacco" /></a></li>
        <li><a href="http://www.google.com">
            <img src="Diversity%20Buttons%202/physicalActivity.png" onmouseover="this.src='Diversity%20Buttons%202/physicalactivityDark.png'" onmouseout="this.src='Diversity%20Buttons%202/physicalactivity.png'" alt="Physical Activity" /></a></li>
        <li><a href="http://www.google.com">
            <img src="Diversity%20Buttons%202/nutrition.png" onmouseover="this.src='Diversity%20Buttons%202/nutritionDark.png'" onmouseout="this.src='Diversity%20Buttons%202/nutrition.png'" alt="Nutrition" /></a></li>
        <li><a href="http://www.google.com">
            <img src="Diversity%20Buttons%202/wellnessChallenges.png" onmouseover="this.src='Diversity%20Buttons%202/wellnesschallengesdark.png'" onmouseout="this.src='Diversity%20Buttons%202/wellnesschallenges.png'" alt="Wellness Challenges" /></a></li>
        <li><a href="wellnessChampions.aspx">
            <img src="Diversity%20Buttons%202/wellnessChampions.png" onmouseover="this.src='Diversity%20Buttons%202/wellnesschampionsDark.png'" onmouseout="this.src='Diversity%20Buttons%202/wellnesschampions.png'" alt="Wellness Champions" /></a></li>
        <li><a href="Contact.aspx">
            <img src="Diversity%20Buttons%202/contact.png" onmouseover="this.src='Diversity%20Buttons%202/contactDark.png'" onmouseout="this.src='Diversity%20Buttons%202/contact.png'" alt="Contact" /></a></li>
    </ul>
</div>

---

您可以使用精灵，只需更改悬停时的背景位置，如果不缓存图像并加载新源代码，您是否可以消除该小光点？您能告诉我该代码如何工作吗？我以前从未使用过精灵。您好，在这里您可以找到技术说明。

enter code here
img
{
   border: none;
}

a
{
  outline: none;
}
#top_nav li:hover ul
{
  display: block;
  position: absolute;
}
#top_nav
{
  display: block;
  position: relative;
}

#top_nav li:hover ul
{
display: block;
position: absolute;
}

#top_nav
{
display: block;
position: relative;
}

#top_nav ul
{
    margin: 0px;
    padding: 0px;
}

#top_nav li
{
    position: relative;
    float: left;
    list-style-type: none;
}

#top_nav ul:after
{
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}


#top_nav ul ul
{
    position: absolute;
    display: none;
    left: 0px;
    width: 0px;

}