css 가로 방향 메뉴 오른쪽으로 이동, 세로 방향 하위 메뉴가 주 메뉴와 일치하지 않음

CSS에서 가로 방향 탐색 메뉴를 만들었습니다. 그것은 잘 작동합니다.css 가로 방향 메뉴 오른쪽으로 이동, 세로 방향 하위 메뉴가 주 메뉴와 일치하지 않음

float를 오른쪽으로 (그리고 최상위 레벨의 순서를 반대로) 변경하면 하위 메뉴가 약간 왼쪽으로 이동한다는 점을 제외하고는 모든 것이 잘됩니다. (따라서 최상위 메뉴와 수직으로 정렬되지 않습니다. 항목).

li:hover > .nav에서 왼쪽 명령을 변경해 보았지만 도움이되지 않았습니다. 누구든지 하위 메뉴의 최상위 수준 탐색 항목 및 항목의 세로 맞춤을 얻기 위해 무엇을 변경해야하는지 볼 수 있습니까?

감사합니다.

내 CSS는 다음과 같습니다

#nav, .nav, #nav .nav li { 
    margin:0px; 
    padding:0px; 
} 

#nav li { 
    float:right; 
    display:inline; 
    cursor:pointer; 
    list-style:none; 
    padding:10px 30px 10px 30px; 
    border:1px #000 solid; 
    position:relative; 
    background: #990000; 
} 

#nav li ul.first { 
    left:-1px; 
    top:100%; 
} 

li, li a { 
    color:#fff; 
    text-decoration:none; 
} 

#nav .nav li { 
    width:100%; 
    text-indent:10px; 
    line-height:30px; 
    margin-right:10px; 
    border-top:1px #000 solid; 
    border-bottom:1px #000 solid; 
    border-left:none; 
    border-right:none; 
    background:#990000; 
} 

#nav li a { 
    display:block; 
    width:inherit; 
    height:inherit; 
} 

ul.nav { 
    display:none; 
} 

#nav li:hover > a, #nav li:hover { 
    color:#990000; 
    background:#fff; 
} 

li:hover > .nav { 
    display:block; 
    position:absolute; 
    width:200px; 
    top:-2px; 
    left:50%; 
    z-index:1000; 
    border:1px #000 solid; 
} 

li:hover { 
    position:relative; 
    z-index:2000; 
} 

#basic li { 
    color:#000; 
}

출처

2012-09-29 BillInPoint