Einrückung verschachtelter Listenpunkte

[Damian]

Hallo zusammen!

Ich habe eine Navigation als Liste erstellt. Zumindest im IE6 (andere Browser stehen leider nicht zur Verfügung) sind die Unterpunkte aber ziemlich weit eingerückt.
Versuche mit margin, padding und list-style-position haben bislang nicht gefruchtet.

Hier mal der Code:

<div id="navi"><ul><li><a href="./index.htm">Start</a></li>
<li><a href=foo.htm>Foo</a>
<div class="navi"><ul>
<li><a href="./foo_bar1.htm">Bar1</a></li>
<li><a href="./foo_bar2.htm">Bar2</a></li>
<li><a href="./foo_bar3.htm">Bar3</a></li>
</ul></li></div>
<li><a href=foobar.htm>Foobar</a>
<div class="navi"><ul>
<li><a href="foobar_foo1.htm">Foo1</a></li>
</ul></li></div></ul></div>

Und das entsprechende Stylesheet:

div#navi {
    font-size: 0.83em;
    float: left;
    margin: 1em 1em 1em 0em;
    padding: 0.5em;
    background-color: #003366;
    text-align: left;
  }
  div#navi ul li {
    list-style-type: none;
  }
  div#navi ul ul li {
  }
  div#navi a {
    display: block;
    padding: 0.1em;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #003366;
  }

.navi {
    font-size: 0.83em;
    padding-left: 1.5em;
  }
  .navi a {
    display: block;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #003366;
  }

Wie kann ich da nun die Unterpunkte nur geringfügig einrücken?!?

Schonmal vielen Dank und Grüße!
Damian