메인메뉴에서 서브메뉴가 나올 때 가로로 나오게 했을시 질문입니다 ^^

아래 코드들은 메인메뉴에서 메뉴제목을 마우스온 했을 때 바로 밑에 서브메뉴들이 가로로 나오는 css코드입니다 ^^그런데 각 메뉴제목 바로 밑에부터 시작해서 서브메뉴들이 나오게 하고 싶은데 몇 번째 메뉴든 간에젤 왼쪽부터 서브메뉴들이 나오더라구요
여기서 메뉴4를 마우스온 시키면
예) 메뉴1 메뉴2 메뉴3 메뉴4 서브메뉴1 서브메뉴2 서브메뉴3
이렇게 나오게 하고 싶은데
메뉴1 메뉴2 메뉴3 메뉴4 서브메뉴1 서브메뉴2 서브메뉴3
이런식으로 몇번째 메뉴든 젤 왼쪽부터 나오더라구요..
float을 left로 해서 그런건 알겠는데.. 아무리 생각해도 어떻게 해야 저렇게 각 메뉴 밑에 서브메뉴가 나오게끔 할 수 있는지는잘 모르곘더라구요..
style type=text/cssul#topnav { margin: 0; padding: 0; float: left; width: 970px; list-style: none; position: relative; font-family:malgun gothic,dotum,helvetica,arial,verdana,sans; font-size:13px; background:#06C; font-weight:bold;}ul#topnav li { float: left; margin: 0; padding: 0; }ul#topnav li a { padding: 10px 15px; display: block; color: #FFFFFF; text-decoration: none;}ul#topnav li:hover { background:#333; }ul#topnav li a:hover { background:#333; }ul#topnav li span { float: none; padding: 10px 5px; position: absolute; left: 0; top:35px; display: none; width: 970px; background: #333; color: #fff; -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; }ul#topnav li:hover span { display: block; }ul#topnav li span a { display: inline;}ul#topnav li span a:hover {text-decoration: underline; }/style
혹시 아시는분 계시면 답변주시면 감사하겠습니다 ^^