CSS 'Dropdown' Fix - css

Question

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;
}

Answer 1

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;