#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2011
    Posts
    2
    Rep Power
    0

    Drop Down menu problem in IE9


    I'm having an issue with getting my drop down menus to work in IE9. They work in chrome and other internet explorer browsers but for some reason they don't drop down in IE9.

    This is my CSS coding:

    div#menubar {
    position: absolute;
    top: 100px;
    left: 150;
    }

    .menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode";
    font-size:15px;
    font-weight:bold;
    }

    .menu ul{
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    }

    .menu li{
    float:left;
    padding:0px;
    }

    .menu li a{
    background:#333333 url("images/seperator.gif") bottom right no-repeat;
    color:white;
    display:block;
    font-weight:normal;
    line-height:35px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
    }

    .menu li a:hover, .menu ul li:hover a{
    background: #F4FA58 url("images/hover.gif") bottom center no-repeat;
    color:white;
    text-decoration:none;
    }

    .menu li ul{
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
    }

    .menu li:hover ul{
    display:block;
    }

    .menu li li {
    background:url('images/sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
    }

    .menu li:hover li a{
    background:none;
    }

    .menu li ul a{
    display:block;
    height:35px;
    font-size:13px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    }

    .menu li ul a:hover, .menu li ul li:hover a{
    background:#F4FA58 url('images/hover_sub.gif') center left no-repeat;
    border:0px;
    color:black;
    text-decoration:none;
    }

    .menu p{
    clear:left;
    }


    and the html coding is:

    <div id="menubar">
    <div class="menu">
    <ul>
    <li><a href="mindex.htm" target="_self">home</a></li>
    <li><a href="mabout.htm" target="_self">about us</a></li>
    <li><a href="designservices.htm" target="_self">design services</a>
    <ul>
    <li><a href="vectorconversion.htm" target="_self">vector art
    conversion</a></li>
    <li><a href="webdesign.htm" target="_self">web design</a></li>
    <li><a href="customdesigns.htm" target="_self">custom designs</a></li>
    <li><a href="databasedesign.htm" target="_self">database
    design</a></li>
    <li><a href="spreadsheetdesign.htm" target="_self">spreadsheet
    design</a></li>
    <li><a href="presentations.htm" target="_self">presentations and
    forms</a></li>
    <li><a href="embroidery.htm" target="_self">embroidery</a></li>
    <li><a href="customtransfers.htm" target="_self">custom
    clothing</a></li>
    </ul>
    </li>
    <li><a href="photoservices.htm" target="_self">photography services</a>
    <ul>
    <li><a href="photosessions.htm" target="_self">photo sessions</a></li>
    <li><a href="photoediting.htm" target="_self">photo editing</a></li>
    <li><a href="videoediting.htm" target="_self">video editing</a></li>
    <li><a href="galleries.htm" target="_self">galleries</a></li>
    </ul>
    </li>
    <li><a href="partyplanning.htm" target="_self">party &amp; wedding
    planning</a></li>
    <li><a href="mcontact.htm" target="_self">contact us</a></li>
    </ul>
    </div>
    </div>

    does anyone know what the issue is?
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2011
    Posts
    1
    Rep Power
    0
    The code works fine in IE9

IMN logo majestic logo threadwatch logo seochat tools logo