dropdown unsorted list css - vertical issue

Question

hello I have a css script for unsorted list (vertical) drop down list that has two problem- 1. in ie7 it shifts. 2. the first sub menu, the top positions is not leveled with the main level. (the second sub menu is fine).

here is the code :

#nav, #nav ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
    position: relative;
    line-height: 1.5em;
}
#nav li
{
    float: inherit;
    position: relative;
    width: 12em;
}
#nav ul
{
    position: absolute;
    width: 12em;
    top: 1.5em;
    display: none;
    left: auto;
}
#nav a:link, #nav a:active, #nav a:visited
{
    display: block;
    padding: 0px 5px;
    border: 1px solid #333;
    color: #fff;
    text-decoration: none;
    background-color: #333;
}

#nav a:hover
{
    background-color: #fff;
    color: #333;
}
#nav li ul a
{
    top: 0;
    position: relative;
    width: 12em;
    overflow: auto; /*force hasLayout in IE7 */
    right: 12em;
}
#nav ul ul
{
    position:absolute;

}

#nav li ul ul
{
    right: 12em;
    margin: 0px 0 0 10px;
    top: 0;
    position: absolute;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul
{
    display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul
{
    display: block;

}

thanks in advance