CSS下拉菜单不工作在IE8 [英] CSS drop down menu not working in IE8
问题描述
我已在css中创建了一个下拉菜单。
I have created a drop down menu in css.
下拉菜单在Firefox，Chrome和IE8中正确显示。但在IE8中，我不能从下拉列表中进行选择。它立即消失..
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文件...
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 here ...）
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>
推荐答案
很多你的样式都被你的子菜单因此您必须添加更具体的选择器，以便正确定位您的第一级和子菜单。此外，你是绝对定位悬浮的子菜单，应该设置在主声明，而不是一个状态。这是一个固定版本：
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; }
这篇关于CSS下拉菜单不工作在IE8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
