css submenu ul li problems

Question

У меня есть меню с использованием SuperFish, но последние 2 подменю не выравниваются правильно.

Вот мой jsfiddle: http://jsfiddle.net/uP4bY/4/

Мой CSS выглядит следующим образом:

/* Header/Navigation */ 
div#Nav { 
    background:transparent url(../Images/nav_Bg.png) no-repeat scroll top left; 
    height:70px; 
    width:980px; 
    margin:0 auto; 
    display:block; 
    position:relative; 
    z-index:2; 
} 
/*Level 1 or Parent/Destination*/ 
div#Nav ul { 
    padding-top:9px; 
    display:inline; 
    list-style-type:none; 
    margin:0; 
} 
div#Nav ul li { 
    background:transparent url(../Images/nav_li_Separator.png) no-repeat scroll center left; 
    padding-left:8px; 
    margin-left:8px; 
    display:inline; 
    position:relative; 
} 
div#Nav ul li.First { 
    background:none; 
    margin:0; 
    padding:0; 
} 
/*Level 2 Treks*/ 
div#Nav ul li ul { 
    left:10px; 
    position:absolute; 
    top:26px; 
    padding:0 !important; 
    z-index:100; 
    height:500px; 
    float:left; 
    list-style:outside; 
    width:auto; 
} 
/*Level 3 Everest Region*/ 
div#Nav ul li ul li ul { 
    float: left; 
    height: 500px; 
    left: 50px; 
    list-style: disc outside none; 
    padding: 0 !important; 
    position: absolute; 
    top: 30px; 
    width: auto; 
    z-index: 100; 
} 
/*Level 5 Everest Base Camp*/ 
div#Nav ul ul ul ul ul { 
    float: left; 
    height: 500px; 
    left: 50px; 
    list-style: disc outside none; 
    padding: 0 !important; 
    position: absolute; 
    top: 60px; 
    width: auto; 
    z-index: 100; 
} 
div#Nav ul li ul li { 
    border-top:1px solid #2f3b48; 
    border-right:1px solid #384857; 
    border-bottom:1px solid #384857; 
    height:24px; 
    display:block; 
    padding:5px 15px 0; 
    width:150px; 
    /*width:150px;*/ 
    border-left:1px solid #384857; 
    margin:0 !important; 
    background:transparent url(http://www.kenticotemplates.net/themeforest/DreamTravel/Images/Nav_ul_li_Bg.png) repeat scroll top left !important; 
} 
div#Nav a, div#Nav a:link, div#Nav a:visited { 
    color:#7f8b98; 
} 
div#Nav a:hover, div#Nav a.selected { 
    color:#96b2cb !important; 
    text-decoration:none; 
} 
div#Nav ul#Links, div#Nav ul.nav { 
    float:left; 
    text-transform:uppercase; 
} 
div#Nav ul.Lang { 
    float:right; 
} 
div#Nav ul li { 
    float:left; 
} 

Я вполне уверен, что мне нужно, чтобы стиль последнего ul li, но когда я делаю это перемещает предыдущий уль Ли.

ОБНОВЛЕНИЕ: это должно выглядеть так, как минус пробел! http://i48.tinypic.com/1zfpxqf.png

Answer 1

Решение проблемы ее скрипкой: http://jsfiddle.net/7mvuw/

Демо: http://jsfiddle.net/7mvuw/embedded/result/

Примечание: Я изменил внешний вид и чувствовать себя, но HTML структура такая же, внешний вид и чувствовать себя на демо-целей вы можете отрегулируйте согласно вашему требованию.

#access { 
    background: #000; 
    display: block; 
    float: left; 
    margin: 0 auto; 
    width: 940px; 
} 
#access .menu-header, 
div.menu { 
    font-size: 13px; 
    margin-left: 12px; 
    width: 928px; 
} 
#access .menu-header ul, 
div.menu ul { 
    list-style: none; 
    margin: 0; 
} 
#access .menu-header li, 
div.menu li { 
    float: left; 
    position: relative; 
} 
#access a { 
    color: #aaa; 
    display: block; 
    line-height: 38px; 
    padding: 0 10px; 
    text-decoration: none; 
} 
#access ul ul { 
    box-shadow: 0px 3px 3px rgba(0,0,0,0.2); 
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); 
    display: none; 
    position: absolute; 
    top: 38px; 
    left: 0; 
    float: left; 
    width: 180px; 
    z-index: 99999; 
    padding-left:0; 
} 
#access ul ul li { 
    min-width: 180px; 
} 
#access ul ul ul { 
    left: 100%; 
    top: 0; 
} 
#access ul ul a { 
    background: #333; 
    line-height: 1em; 
    padding: 10px; 
    width: 160px; 
    height: auto; 
} 
#access li:hover > a, 
#access ul ul :hover > a { 
    background: #333; 
    color: #fff; 
} 
#access ul li:hover > ul { 
    display: block; 
} 
#access ul li.current_page_item > a, 
#access ul li.current-menu-ancestor > a, 
#access ul li.current-menu-item > a, 
#access ul li.current-menu-parent > a { 
    color: #fff; 
}