Navigation verschiebt Element nach rechts

[ThomasG]

Hallo, wer kann mir bitte weiterhelfen?

Ich habe eine vertikale Navigation (siehe weiter unten) mit 3 Submenüs, bei denen sich die Beschriftung je nach Ebene weiter nach rechts verschiebt. Soweit hat alles geklappt, aber außer der Berschriftung verschiebt sich auch noch das ganze Element nach rechts. Wie kann ich es am besten anstellen, dass sich nur die Beschriftung nach rechts verschiebt und alle Listelemente links und rechts bündig untereinander angeordnet sind über alle Ebenen? Ich komme derzeit einfach nicht darauf und habe schon einiges hierzu ausprobiert. Ich wäre über einen hilfreichen Tipp sehr dankbar.

Mit Bestem Dank im voraus

Gruß

Thomas

HTML

<ul id="menu">
  <li><a href="menue1.html">1. Menuitem</a></li>
  <li><a href="menue2.html">2. Menuitem</a>
    <ul>
      <li><a href="menue3.html">1. Submenu</a></li>
      <li><a href="menue4.html">2. Submenu</a></li>
    </ul>
  </li>
  <li><a href="menue5.html">3. Menuitem</a>
    <ul>
      <li><a href="menue6.html">1. Submenu</a>
        <ul>
          <li><a href="menue7.html">1. Subsubmenu</a></li>
          <li><a href="menue8.html">2. Subsubmenu</a>
            <ul>
              <li><a href="menue9.html">1. Subsubsubmenu</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="menue10.html">2. Submenu</a></li>
    </ul>
  </li>
  <li><a href="menue11.html">4. Menuitem</a></li>
</ul>

CSS

ul, li, ul ul {
margin: 0;
padding: 0;
list-style: none;
font-weight: bold;
font-size: 14px;
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
}
ul li {
padding: 0;
}
ul li a {
width: 191px;
height: 19px;
display: block;
text-decoration: none;
color: #e0d0b0;
background: #004e80;
padding: 5px 0 0 10px;
}
ul li a:hover, ul li a:visited:hover {
color: #fff !important;
}
ul ul li {
padding: 0 0 0 10px;
font-weight: normal;
}
ul ul li a {
width: 191px;
display: block;
text-decoration: none;
}