CSS 'Dropdown' 修复

Question

下午，我的 CSS 有问题。第三个下拉菜单放错了，我没有解决办法。

这是我想要的:

之前: http://i53.tinypic.com/2qu85z8.png

之后: http://i51.tinypic.com/241k1on.png

这是 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

将第二个和更多下拉菜单的左侧位置从 0.. 如果 ul 元素上已经有宽度，通常 100% 有效

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

这应该否决 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;
}

注意您可能还必须否决(通过添加额外规则)top: 36px; 到 top: 0;