Nad Flanders: Css Dropdown Problem im IE 7

Beitrag lesen

Hallo,

wie bereits in der Überschrift angerissen, ahbe ich ein kleines Problem bei der Darstellung eines Dropdwon Menus im IE 7.
Im 6er läuft es, ebenso im FF und Safari. Hier mal der Code, dass Css für den Ie6 habe ich mal rausgelassen. Auch muss ich das Css noch nen Bissel aufräumen.

  
<!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">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Untitled Document</title>  
<style type="text/css">  
.menu {font-family: arial, sans-serif;height:30px; position:relative; font-size:11px; z-index:100;background-image: url(../images/menu-bg.jpg);  
text-align:center;padding-top:13px;background-repeat:no-repeat;}  
#menu_inner{width:880px;margin:0 auto 0 auto}  
.menu ul li a, .menu ul li a:visited, .toplink {display:block; text-decoration:none;height:20px; text-align:center;line-height:25px;  
color: #dd2100;font-size:15px;font-weight:bold;text-decoration:none;overflow:hidden;padding-left:8px;padding-right:7px;float:left}  
.sm1{width:60px}.sm2{width:86px}.sm3{width:67px}.sm4{width:65px;}.sm5{width:106px}#sm6{width:100px}.sm7{width:91px}  
.sm1,.sm2,.sm3,.sm4,.sm5,#sm6{border-right:2px solid #dd2100}  
.menu ul {padding:0; margin:0; list-style: none;}  
.uldd{border:1px solid silver;height:45px;width:100px;}  
.menu ul li {float:left; position:relative;}.menu ul li ul {display: none;line-height:15px}  
.menu ul li:hover a {color:#7c7c7c}  
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}  
.menu ul li:hover ul li a.hide {color:#fff;height:25px;line-height:25px}  
.menu ul li:hover ul li ul {display: block;}  
.menu ul li:hover ul li a {display:block;color:#7c7c7c;}  
.menu ul li:hover ul li a:hover {color:#dd2100;}  
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0px;}  
.menu ul li:hover ul li:hover ul.left {left:-105px;}  
</style>  
</head>  
<body>  
<div class="menu">  
<div id="menu_inner">  
<ul>  
<li class="sm1"><a class="toplink" href="../menu/index.html">HOME</a></li>  
<li class="sm1"><a class="toplink" href="../menu/index.html">SITES</a></li>  
<li class="sm1"><a class="toplink" href="../menu/index.html">NEWS</a></li>  
<li class="sm1"><a class="toplink" href="../menu/index.html">BLOG</a></li>  
<li class="sm2"><a class="toplink" href="../menu/index.html">EXPERTS</a></li>  
<li class="sm3"><a class="toplink" href="../menu/index.html">STORE</a></li>  
<li class="sm5"><a class="toplink" href="../menu/index.html">INTERVIEWS</a></li>  
<li class="sm2"><a class="toplink" href="../menu/index.html">REVIEWS</a></li>  
<li class="sm4"><a class="hide" href="#">MEDIA</a>  
<!--[if lte IE 6]>  
<a href="index.html">MEDIA  
<table><tr><td>  
<![endif]-->  
<ul class="uldd">  
<li style="width:100px"><a href="spies.html">VIDEOS</a></li>  
<li style="width:100px"><a href="vertical.html">PODCASTS</a></li>  
</ul>  
<!--[if lte IE 6]>  
</td></tr></table>  
</a>  
<![endif]-->  
</li>  
</ul>  
<a class="toplink" id="sm6" href="../menu/index.html">COMMUNITY</a>  
<a class="toplink" href="../menu/index.html">CONTACT</a>  
</div>  
</div>  
</body>  
</html>  

Ich bin für jede Hilfe dankbar.

Lg,
Nad