CSS drop down menu not working in IE8

问题

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 down. it immediately vanishes..

css file ...

ul {
/*  font-family: Arial, Verdana;
  font-size: 14px;*/
  margin: 0;
  padding: 0;
  list-style: none;
 }
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li 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;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
  display: block;
  position: absolute;
  left:none;
}
li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }

HTML (php file here..)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<TITLE></TITLE>
<link rel="stylesheet" href="menu.css" type="text/css">
</HEAD>
<BODY>
<div id="header" class="top-bottom">
<ul id="menu">
  <li><a href="">Home</a></li>
  <li><a href="">Profile</a>
    <ul>
    <li><a href="./edit_profile.php">Edit Profile</a></li>
    <li><a href="">View Profile</a></li>
    <li><a href="">Add Education</a></li>
    </ul>
  </li>
  <li><a href="">My Connections</a></li>
  <li><a href="">Change Password</a></li>
</ul>
</div>

回答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; }

来源：https://stackoverflow.com/questions/10131959/css-drop-down-menu-not-working-in-ie8

标签

css

internet-explorer-8