0

我在 CSS 中创建了一个下拉菜单。

下拉菜单在 Firefox、Chrome 和 IE8 中正确呈现。但在 IE8 中，我无法从下拉列表中进行选择。它立即消失..

css 文件...

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 文件..）

<!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>
4

1 回答 1

3

您的许多样式都被您的子菜单继承，因此您必须添加更具体的选择器才能正确定位您的第一级和子菜单。此外，您绝对将您的子菜单定位在悬停上，这应该设置在主声明上而不是状态上。这是一个固定版本：

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; }
于 2012-04-12T22:07:39.050 回答