CSS下拉菜单在IE8中不起作用

下拉菜单在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>

来源

2012-04-12 killben

让我们来看看一些代码。 – 2012-04-12 21:16:31

发布一些代码，使用相关部分制作[jsfiddle]（http://jsfiddle.net/），并正确解释问题。请检查指南; http://stackoverflow.com/questions/how-to-ask – sg3s 2012-04-12 21:18:08

killben - 我们会，但看到代码后。所有的请。 =） – 2012-04-12 21:18:31

很多您的风格正由遗传您的子菜单，因此您必须添加更具体的选择器才能正确定位第一级和子菜单。此外，您绝对将鼠标悬停在子菜单上，应该在主声明中设置，而不是在状态中设置。这里有一个固定的版本：

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-12 22:07:39

CSS下拉菜单在IE8中不起作用

回答

相关问题