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

Question

我有一个下拉菜单，假设用较暗的图像切换按钮的图像。我使用HTML和CSS，以及onmouseover / out JavaScript。我在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>

CSS

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;

}