Navigationsleiste + horizontales Menü

[Matthias]

Das Ziel: Navigationsleiste (unterschiedliche Linkbreite!) mit horizontalem Menü. Beim Hovern soll das Menü genau unterhalb des jeweiligen Links der Navi-Leiste angezeigt werden. Es wird jedoch (bis jetzt) immer unterhalb des 1.Links der Navi-Leiste angezeigt. Anbei noch HTML & CSS, freue mich über Lösungen.

HTML-Code:

<div>  
  <ul id="menu">  
   <li><a href="#" title="Titel1">Titel1</a></li>  
   <li><a href="#" title="Titel2">Titel2</a></li>  
   <li><a href="#" title="Titel3">Titel3</a></li>  
     <li id="Titel4"><a href="#" title="Titel4">Titel4</a>  
      <ul>  
                                <li><a href="#" title="Titel4 eins">Titel 4 eins</a></li>  
                                <li><a href="#" title="Titel4 zwei">Titel 4 zwei</a></li>  
      </ul></li>  
   <li><a href="#" title="Titel5">Titel5</a></li>  
   <li><a href="#" title="Titel6">Titel6</a></li>  
     <li id="Titel7"><a href="#" title="Titel7">Titel7</a>  
      <ul>  
                                <li><a href="#" title="Titel7 eins">Titel7 eins</a></li>  
                                <li><a href="#" title="Titel7 zwei">Titel7 zwei</a></li>  
      </ul></li>  
   <li><a href="#" title="Titel8">Titel8</a></li>  
  </ul>  
</div>

CSS

#menu {  
  background: #930ED5;  
  padding: 5px 2%;  
  margin: 0;  
  text-align: left;  
  line-height: 1.7em;  
  color: #FDD35D;  
}  
#menu ul {  
  margin: 0;  
  padding: 0;  
  list-style-type: none;  
}  
#menu li {  
  display: inline;  
  border-right: 1px solid #FDD35D;  
  list-style-type: none;  
  padding: 0 7px 0 5px;  
  font-size: 1em;  
  font-weight: bold;  
  line-height: 1.7em;  
  text-align: center;  
}  
#menu li a {  
  color: white;  
  text-decoration: none;  
}  
#menu li ul {  
  display: none;  
}  
#menu li:hover ul {  
  position: absolute;  
  display: block;  
  line-height: 2.7em;  
  margin-top: -3px;  
}  
#menu li ul li {  
  padding: 0 0.3em 0.2em 0.3em;  
  background-color: #930ED5;  
}  
#menu li ul li a {  
  color: #FFFFFF;  
}  
#menu li ul li:hover {  
  background-color: #FDD35D;  
}

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias!

* Das div-Element um die Liste ist nicht notwendig, da es in deinem Fall nichts zu gruppieren gibt.
* Beschäftige dich mit Positionierung.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

* Das div-Element um die Liste ist nicht notwendig, da es in deinem Fall nichts zu gruppieren gibt.

Das div-Element um die Liste sollte ein nav-Element sein*, um die Navigation als solche zu kennzeichnen, auch wenn es nichts zu gruppieren gibt.

Qapla'

Das Kleingedruckte:
* in HTML5

[Matthias]

Danke für eure Tipps, dass div-Element wurde entfernt und <ul id="menu"> in <ul id="nav"> geändert, ebenso steht im CSS statt #menu jetzt nav. Zwischen li und a href wurden die classen definiert. So siehts es im Html aus:

<ul id="nav">
   <li class="start"><a href="#" title="Titel1">Titel1</a></li>
   <li class="link2"><a href="#" title="Titel2">Titel2</a></li>
   <li class="link3"><a href="#" title="Titel3">Titel3</a></li>

Für die Positionierung habe ich folgendes getestet:

#nav li ul a.link2{
  margin-left:40px;
        }
#nav li ul a.link3{
  margin-left:70px;
        }

Dies natürlich auch in #nav li, #nav li a ... usw, leider ohne positives Ergebnis. Was ist die korrekte Löung? Vielleicht ein Codebeispiel dazu. Danke, Matthias.

[Gunnar Bittersmann]

@@Matthias:

nuqneH

Danke für eure Tipps, dass div-Element wurde entfernt und <ul id="menu"> in <ul id="nav"> geändert

?? Von wem willst du diesen Tip bekommen haben?

Von mir nicht. Ich sagte nicht "nav"-ID, sondern nav-Element.

„[…] um die Navigation als solche zu kennzeichnen“, was auch der Barrierefreiheit zugute kommt. Nutzer von Screenreadern könnten Navigationselemente gezielt anspringen. Oder auch überspringen, um gleich zum Inhalt zu gelangen.

Das Markup sollte so aussehen:

<nav>  
  <ul>  
    ⋮  
  </ul>  
</nav>

Ob das nav-Element noch eine ID bekommen sollte, hängt davon ab, ob es noch andere nav-Elemente auf der Seite gibt.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias!

<ul id="nav">
   <li class="start"><a href="#" title="Titel1">Titel1</a></li>
   <li class="link2"><a href="#" title="Titel2">Titel2</a></li>
   <li class="link3"><a href="#" title="Titel3">Titel3</a></li>

Die Klassen sind überflüssig, im realen Quelltext ebenso die Wiederholungen der Linktexte im Titelattribut.

Für die Positionierung habe ich folgendes getestet:

Offensichtlich hast du mein Tutorial nicht gelesen.

Matthias