CSS 'Dropdown' Fix

Afternoon, I have an issue with my CSS. The third dropdown is placed incorrectly and I have no solution.

Here is what I want:

Before: http://i53.tinypic.com/2qu85z8.png

After: http://i51.tinypic.com/241k1on.png

Here is the CSS:

ul.dropdown, ul.dropdown li, ul.dropdown ul {
    list-style: none outside none;
}
ul.dropdown {
    background: url("../img/nav_bg.png") no-repeat scroll left top transparent;
    float: left;
    padding: 0 0 3px;
    position: relative;
    width: 970px;
    z-index: 100;
}
ul.dropdown li {
    float: left;
    font-size: 1开发者_如何学编程.2em;
    font-weight: bold;
    line-height: 1.2em;
    margin: 0;
    padding: 0;
    position: relative;
}
ul.dropdown li a {
    color: #000000;
    display: block;
    padding: 7px 0;
}
ul.dropdown li a:hover {
    color: #0971BA;
}
ul.dropdown li a span {
    border-right: 1px solid #D6DBE0;
    display: block;
    padding: 8px 12px;
}
ul.dropdown li a.active {
    color: #0971BA;
}
ul.dropdown li.drop a span {
    background: url("../img/nav_icons.png") no-repeat scroll right 13px transparent;
    min-height: 0;
    padding: 8px 25px 8px 12px;
}
ul.dropdown li.drop:hover {
    margin: 0 0 0 -1px;
    text-align: left;
}
ul.dropdown li.drop a {
    background: url("../img/nav_sub_bg.png") repeat-x scroll 0 -999em transparent;
}
ul.dropdown li.drop:hover a {
    background: url("../img/nav_sub_bg.png") repeat-x scroll 0 0 #0653AE;
    min-height: 0;
}
ul.dropdown li.drop:hover a span {
    background-position: right -12px;
    border: medium none;
    color: #FFFFFF;
    padding: 8px 26px 8px 13px;
}
ul.dropdown ul {
    left: 0;
    margin: 0 0 0 -1px;
    overflow: hidden;
    padding: 8px 0 0;
    position: absolute;
    top: 36px;
    visibility: hidden;
    width: 182px;
    z-index: 102;
}
ul.dropdown li ul li {
    float: none;
    font-size: 12px;
    text-shadow: #000 0px 1px 0px;
    font-weight: bold;
    min-height: 0;
    padding: 0;
}
ul.dropdown li.hover, ul.dropdown li:hover {
    position: relative;
    z-index: 103;
}
ul.dropdown li.drop:hover ul li a {
    background: url("../img/nav_sub_bg.png") repeat-x scroll 0 -54px transparent;
    color: #FFFFFF;
    display: block;
    height: 14px;
    min-height: 0;
    padding: 7px 12px;
}
ul.dropdown li.drop:hover ul li a:hover {
    background-position: 0 -92px;
    min-height: 0;
}
ul.dropdown li.drop:hover ul li a span {
    background: none repeat scroll 0 0 transparent;
    display: inline;
    padding: 0;
}
ul.dropdown li.drop:hover ul li.lastChild {
    height: 30px;
}
ul.dropdown li.drop:hover ul li.lastChild a {
    padding: 7px 12px 9px;
}
ul.dropdown li.drop:hover ul li.lastChild a {
    background-position: 0 -130px;
}
ul.dropdown li.drop:hover ul li.lastChild a:hover {
    background-position: 0 -168px;
}
ul.dropdown li:hover > ul {
    visibility: visible;
}
ul.dropdown li.home a {
    background: url("../img/nav_icons.png") no-repeat scroll 14px -36px transparent;
    display: block;
    min-height: 0;
}
ul.dropdown li.home a:hover {
    background-position: 14px -69px;
}
ul.dropdown li.home a:active {
    background-position: 14px -102px;
}
ul.dropdown li.home a span {
    cursor: pointer;
    display: block;
    min-height: 0;
    padding: 8px 19px 8px 20px;
    text-indent: -999em;
}

change the left position of the second and further dropdowns from 0.. usually 100% works if there's already a width on the ul elements

ul.dropdown ul ul {left: 100%;}

which should overrule the left: 0; in this:

ul.dropdown ul {
    left: 0;
    margin: 0 0 0 -1px;
    overflow: hidden;
    padding: 8px 0 0;
    position: absolute;
    top: 36px;
    visibility: hidden;
    width: 182px;
    z-index: 102;
}

NOTE you might also have to overrule (by adding to the extra rule) top: 36px; to top: 0;