Hi,
i have a problem, to get a dropdown menu working in Ie 7. It works in all other browser including IE 6.
The first link in the dropdown ist still clickable, but the second one disappears, whe i try to hover it. This is my source:
The dropwdown menu is located under "MEDIA". The styles for IE 6 are not included.
Can anyone help me, getting the dropdown disiplayed correctly?
Nad
i have a problem, to get a dropdown menu working in Ie 7. It works in all other browser including IE 6.
The first link in the dropdown ist still clickable, but the second one disappears, whe i try to hover it. This is my source:
HTML:
<html xmlns="#">
<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="#">HOME</a></li>
<li class="sm1"><a class="toplink" href="#">SITES</a></li>
<li class="sm1"><a class="toplink" href="../menu/index.html">NEWS</a></li>
<li class="sm1"><a class="toplink" href="#">BLOG</a></li>
<li class="sm2"><a class="toplink" href="#">EXPERTS</a></li>
<li class="sm3"><a class="toplink" href="#">STORE</a></li>
<li class="sm5"><a class="toplink" href="#">INTERVIEWS</a></li>
<li class="sm2"><a class="toplink" href="#">REVIEWS</a></li>
<li class="sm4"><a class="hide" href="#">MEDIA</a>
<!--[if lte IE 6]>
<a href="#">MEDIA
<table><tr><td>
<![endif]-->
<ul class="uldd">
<li style="width:100px"><a href="#">VIDEOS</a></li>
<li style="width:100px"><a href="#">PODCASTS</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
<a class="toplink" id="sm6" href="#">COMMUNITY</a>
<a class="toplink" href="#">CONTACT</a>
</div>
</div>
</body>
</html>Can anyone help me, getting the dropdown disiplayed correctly?
Nad
