Home/ Questions/Q 7069521
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T05:27:20+00:00

I know this is a typical question but I cannot find the solution. My

  • 0

I know this is a typical question but I cannot find the solution. My CSS drop down menu works fine everywhere but IE9. The drop down simply doesn’t work in IE9. Any advice? Thank you.

Here is the menu HTML:

<div id="menu">
<ul> 
  <li><a href="#"><span>Needs Assessment</span></a>
    <ul> 
      <li><a href="#">History1</a></li> 
         <li><a href="#">Team1</a></li> 
         <li><a href="#">Offices1</a></li> 
    </ul> 
  </li>

  <li><a href="#"><span>Design and Development</span></a>
    <ul> 
         <li><a href="#">History2</a></li> 
     <li><a href="#">Team2</a></li> 
         <li><a href="#">Offices2</a></li> 
    </ul> 
  </li>

  <li><a href="#"><span>Prepare and Implement</span></a>
    <ul> 
         <li><a href="#">History3</a></li> 
         <li><a href="#">Team3</a></li> 
         <li><a href="#">Offices3</a></li> 
  </ul> 
 </li>

 <li><a href="#"><span>Debrief and Measure</span></a>
   <ul> 
        <li><a href="#">History4</a></li> 
        <li><a href="#">Team4</a></li> 
        <li><a href="#">Offices4</a></li> 
   </ul> 
</li>

<li><a href="#"><span>Resources</span></a>
  <ul> 
    <li><a href="#">History4</a></li> 
    <li><a href="#">Team4</a></li> 
    <li><a href="#">Offices4</a></li> 
  </ul> 
</li>

</ul>
</div>

Here is my CSS for this menu:

#menu {
    width: 942px;
    height: 47px;
    border: solid 0px #000;
}

#menu ul {
    margin-left: 0px;
    padding-left: 0px;
}

#menu ul li {
    position: relative;
    display: inline;
    float: left;
    list-style: none;
}

#menu li ul {
    position: absolute;
    margin: 0px;
    padding: 0px;
    display: none;
}

#menu li:hover ul { 
    display: block;
    z-index: 999;
}

#menu li li a {
    color: #fff;
}

#menu li li a:hover {
    color: #ccc;
}

#menu ul li a {
    display: block;
    width: 188px;
    padding: 12px 0px 10px 0px;
    background:url 'http://www.laerdal.com/Laerdal/usa/discoversimulation/images/button.png');
    border: solid 0px black;
    font-family: 'Cabin', sans-serif;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    text-align: center;
}

#menu a span {
    float: left;
    display: block;
    padding: 3px 5px 4px 6px;
    color:#fff;
    float: none;
    border: solid 0px black;
}

#menu a:hover span {
    color:#bbb;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As Sparky672 said, your HTML is hopelessly invalid. You should fix it.

    However, to fix the specific problem you’re having, all you need to do is add a valid doctype as the very first line:

    <!DOCTYPE html>

    Without this, IE is in quirks mode.

    • 0