Drop down problems, IE

Right, heres the problem.

The drop down navigation messes up in IE 7 and 8.

For IE7 the drop down floats up covering the original option, and on IE8 there is a constant white area in the top left of the layout, that covers to logo and the N in North.

Heres a picture of the problem:

http://www.tehupload.com/uploads/109...c2screenie.JPG

Heres a copy of the CSS code that could have something to do with it:

Code:

---

.body{
margin-top:0px;
background-color:#FFFFFF;

}

table {
border: 1px dashed #3F96C1;
border-bottom:none;
border-top:none;
margin-top:0px;
padding-top:0px;
}

.big_quote {
float:left;
font: bold 28px arial;
color: #134964;
margin-left:5px;
padding-top:7px;}

.header {
float:left;
font: bold 16px arial;
color: #134964;
margin-left:5px;
padding-top:7px;}

.content {
float:left;
font: bold 12px arial;
color: #134964;
margin-left:5px;
padding-top:7px;}

.small_content {
float:left;
font: 11px arial;
color: #134964;
margin-left:5px;
padding-top:7px;}
 
.bottominfo {
float:left;
font: 11px arial;
color: #3F96C1;
padding-left:5px;
padding-top:18px;}

.bottominfo2 {
text-align:center;
font: bold 10px arial;
color: #3F96C1;
margin-top:54px;
padding-bottom:5px;
margin-left:4px;
text-decoration:none;}

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

#sddm li
{        margin: 0;
        margin-top:2px;
        padding: 0;
        list-style: none;
        float: left;
        font: bold 13px arial}

#sddm li a
{        display: block;
        margin: 0 1px 0 4px;
        padding: 4px 10px;
        width: 56px;
        background:none;
        color: #FFF;
        text-align: center;
        text-decoration: none;
        display: inline;

}

#sddm li a:hover
{        background:none;
text-decoration:underline;}

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

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

        #sddm div a:hover
        {        background: #49A3FF;
                color: #FFF}

---

Can anyone help?

Thanks