CSS drop down menu not working in IE8

Question

I have created a drop down menu in css.

The drop down menu is rendered correctly in Firefox, Chrome and IE8. But in IE8 I am not able to make the selection from the drop

Answer 1

A lot of your styles were being inherited by your submenu so you have to add a more specific selector in order to target your first level and sub menu properly. Also, you were positioning absolutely your submenu on hover, that should be set on the main declaration and not on a state. Here is a fixed version:

CSS

ul {
/*  font-family: Arial, Verdana;
  font-size: 14px;*/
  margin: 0;
  padding: 0;
  list-style: none;
 }
#menu > li { /* used the child selector here to properly target your first level menu items */
  position: relative;
  float: left;
}
#menu li ul {
    display: none;
    position: absolute; /* moved the positioning to the main declaration instead */
    left:0; /* fixed this propery, there is no left:none as you had it before */
    top:100%;
}

#menu a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;
}
#menu li a:hover { background: #617F8A; }

#menu li:hover ul {
  display: block;
}

#menu li:hover li {
  font-size: 11px;
}
#menu li:hover a { background: #617F8A; }
#menu li:hover li a:hover { background: #95A9B1; }