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;
}

[LX]

Du suchst nach der CSS-Eigenschaft text-indent.

Gruß, LX

[ThomasG]

Hallo LX,

Danke für Deinen Tip. Das mit der CSS-Eigenschaft text-indent hat bei mir leider nur teilweise funktioniert. Auf der 1. Submenü Ebene hat es funktioniert, aber bei den beiden darunterliegenden Ebenen nicht. Auch nicht wenn ich es auf das Element "a" angewendet habe. Gibt es vielleicht noch eine weitere CSS-Anweisung mit der es möglich ist diesen Text in den unteren Submenüs nach rechts zu verschieben.

Menu
  |
  Submenu -> hier hat text-indent funktioniert
     |
    Subsubmenu -> hier nicht
        |
      Subsubsubmenu -> hier nicht

Gruß
Thomas

Du suchst nach der CSS-Eigenschaft text-indent.

Gruß, LX

[Der Martin]

Hi,

Hallo, wer kann mir bitte weiterhelfen?

ich kann dir im Moment nur einen Denkanstoß geben. Du gibst deinen li-Elementen ein padding je nach Verschachtelungstiefe. Das wirkt sich aber auch auf das darin enthaltene ul der nächsten Ebene aus, das ja als Kind von li durch dessen padding mit verschoben wird.
Vielleicht kommst du besser hin, wenn du das padding den a-Elementen gibst (je nach Verschachtelungstiefe unterschiedlich).

Dein zweites, inhaltlich gleiches Posting habe ich übrigens gesperrt; was soll bitte der Quatsch, innerhalb von nicht einmal zehn Minuten zweimal dasselbe zu posten? Dass solche Doppelpostings nicht erwünscht sind, sollte sich allmählich rumgesprochen haben.

Ciao,
 Martin

[töbi]

Hallöle

Wenn ich es richtig sehe und deinen Problem verstehe, funktionierte es bei deinem Code.

Kann es sein, dass dir der Standard-margin vom body-Tag einen Streich spielt?

wenn ja, mach noch
CSS:

  
body {  
  margin:0;  
}  

Gruss von
(einfacher gehts nicht)