“mobile”/ adcombo
Dismiss Notice
Welcome to Our Community
Wanting to join the rest of our members? Feel free to sign up today.

Dropdown Problem in IE 7

Discussion in 'Programming and Scripts' started by Nad Flanders, Apr 4, 2009.

  1. Nad Flanders

    Nad Flanders Affiliate affiliate


    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 xmlns="#">
    <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);
    #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,.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;}
    <div class="menu">
    <div id="menu_inner">
    <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
    <ul class="uldd">
    <li style="width:100px"><a href="#">VIDEOS</a></li>
    <li style="width:100px"><a href="#">PODCASTS</a></li>
    <!--[if lte IE 6]>
    <a class="toplink" id="sm6" href="#">COMMUNITY</a>
    <a class="toplink" href="#">CONTACT</a>
    The dropwdown menu is located under "MEDIA". The styles for IE 6 are not included.

    Can anyone help me, getting the dropdown disiplayed correctly?

  2. terraleads

Top Resources