#sddm
{    margin: 0;
    padding: 0;
    z-index: 30;
    
    }

#sddm li
{    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font: 11px arial}

#sddm li a
{
    display: block;
    margin: 0 1px 0 0;
    padding: 2px 18px;
    width: 100%;
    background: #1E3D5A;
    color: #FFFFFF;
    text-align: left;
    text-decoration: none
}

#sddm li a:hover
{    background: #1E3D5A}

#sddm div
{
    position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: #1E3D5A;
    border: 1px solid #5970B2
}

    #sddm div a
    {
    position: relative;
    display: block;
    margin: 0;
    padding: 5px 10px;
    width: auto;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: #1E3D5A;
    color: #FFFFFF;
    font: 11px arial
}

    #sddm div a:hover
    {
    color: #FFFFFF;
    background: #9EC3B2;
}

I have a drop down menu using javascript and CSS and it looks fine in Firefox but it doesnt look right in IE. I have attached my CSS code and both IE and Firefox images.

The 1st image is IE and 2nd one is firefox.
need help.

thx

Z-index ONLY works with positioned elements, so this will have ZERO effect:

#sddm
{ margin: 0;
padding: 0;
z-index: 30;

}

You'll have to set #sddm to position: relative at the very least, position:absolute may be necessary depending on the rest of the layout.

When you float an element, as you have the <li> you MUST give it a defined width.

still couldnt work. i added postion: absolute and/or relative and set width:100% in <li>. the main image moved up but the links position still couldnt align in one line.

here is my html code

<table width="800" border="0" cellspacing="0" cellpadding="0">
        <tr> 
        <div style="clear:both">
        <ul id="sddm">
    <li><a href="http://www.seiler.com/">HOME</a></li>
    <li><a href="http://www.seiler.com/whoweare.html">WHO WE ARE</a></li>
    <li><a href="http://www.seiler.com/services.html">SERVICES</a></li>
    <li><a href="http://www.seiler.com/industry.html">INDUSTRY EXPERTISE</a></li>
    <li><a href="http://www.seiler.com/career.html" 
        onmouseover="mopen('m1')" 
        onmouseout="mclosetime()">CAREER OPPORTUNITIES</a>
        <div id="m1" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="http://www.seiler.com/new.html">College Students &amp; Graduates</a></a>
        <a href="http://www.seiler.com/experienced.html">Experienced Professionals</a></a>        </div>
    </li>
    <li><a href="http://www.seiler.com/contact.html">INFORMATION / CONTACT US</a></li>
</ul>
 </div>
        </tr>
      </table>

http://www.seiler.com/index2.html

is the page im working now