CSS выпадающее меню не работает в IE8

Я создал выпадающее меню в css.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

Давайте посмотрим код. –

Отправьте некоторый код, сделайте [jsfiddle] (http://jsfiddle.net/) соответствующими разделами и правильно объясните проблему. Проверьте правила, пожалуйста; http://stackoverflow.com/questions/how-to-ask – sg3s

killben - мы будем, но после просмотра кода. все это пожалуйста. =) –

Много ваших стилей были унаследованы ваше подменю, поэтому вам нужно добавить более конкретный селектор, чтобы правильно настроить ваш первый уровень и подменю. Кроме того, вы позиционировали абсолютно ваше подменю на зависании, которое должно быть установлено в основном объявлении, а не в состоянии. Вот фиксированная версия:

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

ответ

Смежные вопросы