Horizontales Untermenü

[barodscheff]

Hallo Leute,

ich bin neu hier im Forum und hoffe mir kann einer bei meinem Problem helfen. Ich habe erst ein paar Wochen Erfahrung mit CSS also denke ich wird es für euch keine Problem sein

Ich habe eine horizontale Navigation und mein Ziel ist es eine genauso aussehende horizontale Unternavigation erscheinen zu lassen wenn man auf einen Hauptpunkt mit Unterpunkten geht.
Ich hab schon vieles versucht aber irgendwie werden die Unterpunkte einfach nicht horizontal.

Schon mal vielen Dank im Voraus und bitte keine Links zu Stu Nichollis^^


Hier die Codes:

<div id="nav">
<ul>
<li><a href="#.html">Startseite</a></li>
<li><a href="#.html">Obere Navi</a>
<ul>
<li><a href="#.html">ein Navipunkt</a></li>
<li><a href="#.html">ein Navipunkt</a></li>
<li><a href="#.html">ein Navipunkt</a></li>
<li><a href="#.html">ein Navipunkt</a></li>
<li><a href="#.html">ein Navipunkt</a></li>
<li><a href="#.html">ein Navipunkt</a></li>
<li><a href="#.html">ein Navipunkt</a></li>
<li><a href="#.html">ein Navipunkt</a></li>
</ul>
</li>
<li><a href="#.html" title="Kontaktseite">Obere Navi 2</a>
<ul>
<li><a href="#.html">ein Navipunkt</a></li>
<li><a href="#.html">ein Navipunkt</a></li>
<li><a href="#.html">ein Navipunkt</a></li>
<li><a href="#.html">ein Navipunkt</a></li>
<li><a href="#.html">ein Navipunkt</a></li>
<li><a href="#.html">ein Navipunkt</a></li>
<li><a href="#.html">ein Navipunkt</a></li>
<li><a href="#.html">ein Navipunkt</a></li>
<li><a href="#.html">ein Navipunkt</a></li>
</ul>
</li>
<li><a href="#.html">Obere Navi 3</a></li>
<li><a href="#.html">Obere Navi 4</a></li>
</ul>
</div>


CSS:

* {
padding: 0;
margin: 0;
}

#nav {
float: left;
position: relative;
width: 100%;
min-width: 800px;
max-width: 1366px;
background-color: #99cc00;
background-image: url(navi.gif);
padding: 8px;
}

#nav ul {
margin-left: 10%;
}

#nav li {
position: relative;
display: inline; /* horizontal */
list-style-type: none; /* keine Aufzählungspunkte */
text-decoration: none;
}

#nav a {
color: white;
background-color: #99cc00;
background-image: url(navibutton.gif);
background-position: center;
padding: 8px 12px;
font-size: 11pt;
font-weight: bold;
}

#nav a:hover,
#nav a:focus {
color: black;
background-color: #99cc00;
background-image: url(navibuttonaktiv.gif);
background-position: center;
padding: 8px 12px;
}

#nav a:active {
color: black;
background-color: #99cc00;
background-image: url(navibuttonaktiv.gif);
background-position: center;
padding: 8px 12px;
}



#nav li ul {
display: none;
position: absolute;
top: 25px;
left: 0;
width: 100%;
margin: 0;
padding: 0;
background-color: #99cc00;
}

#nav li ul a {
display: block;
float: left;
width: auto;
background-color: #99cc00;
background-image: none;
font-size: 11pt;
font-weight: bold;
color: black;
padding: 8px 4px;
}


#nav li ul a:hover {
background-image: none;
color: black;
padding: 8px 4px;
}

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




lg

[djheke]

Hallo,
du brauchst noch diese Angabe, wenn du deiner Navi eine feste Breite gibst z. B. 1000px.

Code: Alles auswählen

#nav li ul {
  width:100%;
}


[barodscheff]

Vielen Dank für die Antwort,

aber das was du schreibst hatte ich doch schon gemacht. Oder verstehe ich da jetzt was falsch?

[sejuma]

etwa so und die Breite abhängig von den Links:

Code: Alles auswählen

#nav ul ul {width: 1000px;} 

[barodscheff]

Vielen Dank es hat jetzt geklappt.

Jedoch habe ich jetzt ein anderes Problem. Die Navigation ist 100% breit und das würde ich dann auch gern bei der Unternavigation haben. Jedoch geht da ja keine flexible Breite.

Wie kann ich das lösen?

[sejuma]

Es gibt dabei zwei Hauptprobleme:

Die 100% von #nav ul ul müssen sich auf einen übergordneten Wert beziehen.
Das ist die Hauptüberschrift, die eben nur so breit ist wie sie selbst und keine 100%. Also bringt hier eine prozentuale Angabe nichts.

Selbst wenn eine prozentuale Lösung möglich wäre, bzw. selbst bei fixer Breite hast du dann noch das Problem, dass sich jedes Untermenü unterhalb seiner Überschrift öffnet und du es individuell nach links verschieben müsstest.

Außerdem spielen dann auch noch die Pixelwerte, z.B. beim Padding eine Rolle, die dann zu den 100% noch hinzuzurechnen sind, so dass sich wiederum eine Gesamtbreite von über 100% ergibt.

Wenn es dir also nicht ums Grundsätzliche geht: Überlege, ob du überhaupt so viele Unternavigationspunkte brauchst und ob für diese nicht doch eine fixe Breite ausreicht.

Ansonsten kannst du hier noch etwas mit einem height-Wert tricksen:

Code: Alles auswählen

#nav   {height: 50px;}