Conflicting <li> styles

Question

Here is the problem. I had a nicely styled navigation. Then I added this side collapsible/expandable tree submenu, and the top navigation bar got distorted. I know there is some conflict in styling li element for the top navigation and side menu. I just can't figure out what exactly it is and how to fix it. Maybe you will spot it. Here is the URL: http://eximi.dreamhosters.com/Hawaii/pkdiet/pkd.php You can see that the last item on the menu - "Contact us" jumps to the second line, which is not supposed to happen.

This is my CSS relevant to the issue:

/Main navigation/

#menu {
    position: relative;
    float: left;
    margin-left: 132px; 
}

#menu li{
    display:inline;
    height: 33px;
    line-height: 33px;
    text-align: center;
    padding-right: 30px;
    color:#5a5a5a;
    font-family: Tunga, sans-serif;
    font-size: 14px;
}

.menu_item  a:link {
    float: left;
    height: 33px;
    line-height: 33px;
    text-align: center;
    padding-right: 30px;
    color:#5a5a5a;
    font-family: Tunga, sans-serif;
    font-size: 14px;
}

.menu_item  a:visited {
    float: left;
    height: 33px;
    line-height: 33px;
    text-align: center;
    padding-right: 30px;
    color:#5a5a5a;
    font-family: Tunga, sans-serif;
    font-size: 14px;
}

.menu_item a:hover {
    color:#1e1d1d;
}

/* CSS Tree menu styles */
ol.tree
{
    padding: 0 0 0 30px;
    width: 130px;
}
    li 
    { 
        position: relative; 
        margin-left: -15px;
        list-style: none;
    }
    li.file
    {
        margin-left: -1px !important;
    }
        li.file a
        {
            color: #fff;
            padding-left: 21px;
            text-decoration: none;
            display: block;
        }
    li input
    {
        position: absolute;
        left: 0;
        margin-left: 0;
        opacity: 0;
        z-index: 2;
        cursor: pointer;
        height: 1em;
        width: 1em;
        top: 0;
    }
        li input + ol
        {
            background: url(images/toggle-small-expand.png) 40px 0 no-repeat;
            margin: -0.938em 0 0 -44px;
            xdisplay: block;
            height: 1em;
        }
        li input + ol > li { height: 0; overflow: hidden; margin-left: -14px !important; padding-left: 1px; }
    li label
    {
        cursor: pointer;
        display: block;
        padding-left: 17px;
    }

    li input:checked + ol
    {
        background: url(images/toggle-small.png) 40px 5px no-repeat;
        margin: -1.25em 0 0 -44px; 
        padding: 1.563em 0 0 80px;
        height: auto;
    }
        li input:checked + ol > li { height: auto; margin: 0 0 0.125em;}
        li input:checked + ol > li:last-child { margin: 0 0 0.063em;}

Answer 1

First: specificity. Ids override classes, classes override elements. If multiple styles apply, the most specific one is applied. This is done per line, so you only need to override the things you want to change.

If you do not want margins on menu items, you should add

#menu li {
    margin-left: 0;
}

That cancels out margin-left: -15px; in the li element styling later.

Also I would not use a class .menu_item but instead target those items with #menu li. Every .menu_item is in #menu and every li in #menu is a menu item, so there's no need to introduce more classes.

Update

I think I've found the problem. These two lines need to be removed from .menu_item a:link {:

float: left;
padding-right: 30px;

Floating elements inside inline elements doesn't seem to work too well.

Answer 2

My advice would be to set

#toggle
{
    margin-top: 54px;
    float:right;
    /*remove clear:both and margin-right:70px*/
}

#menu {
    position: relative;
    float: left;
    margin-left: 132px; 
    width: 920px; /*in accordance with #wrapper*/
}

Answer 3

You have the wrong doctype, forcing the page into quirks mode, so it will never work as expected, particularly on IE.