Menu suspenso CSS não funciona no IE8
Eu criei um menu suspenso no css.
O menu suspenso é renderizado corretamente no Firefox, Chrome e IE8. Mas no IE8 não consigo fazer a seleção no menu suspenso. desaparece imediatamente ..
arquivo css ...
<code>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; } </code>
~
HTML (arquivo php aqui ..)
<code><!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> </code>