Dropdown Menü Fehler

[Basti225]

Hey
Habe mir ein kleines Dropdown Menü gecodet nur ein paar Fehler rein gebracht.

Die Ecken des Menüs sind abgerundet.
Doch wenn an einer Ecke ein Dropdown Menüpunkt ist, sind die Menüpunkte auch abgerundet.

Und wenn ich das Browserfenster kleiner ziehe bzw. kleineren Bildschirm habe, gehen die Menüpunkte übereinander.

Kann jmd. mal drübergucken und mir helfen die Fehler zu beheben?

[HTML]

Punkt1

Punkt2

• 1.0

Punkt3

Punkt4

• 4.0


• 4.1

[/HTML]

[CODE]#navi {
margin-top: -35px;
margin-left: 750px;
display: block;
}

#navi a {
background-image: url(…/images/navibackground.png);
text-decoration: none;
font-family: Verdana;
font-size: 14px;
color: #fff;
padding: 18px 15px 15px 15px;
border-top: 1px solid #404040;
border-bottom: 1px solid #404040;
}

#navi a:hover {
background-image: url(…/images/navibackgroundhover.png);
}

#navi a:active {
color: #b4b4b4;
}

#navi li{
float:left;
margin: 0px;
}

#navi li ul {
display:none;
}

#navi li:hover ul {
display:block;
width: 85px;
margin-top: 15px;
}

#navi li:hover ul li a {
border: 0px;
}

#navi li:hover ul li a {
display: block;
background-image: url(…/images/navidropdownbackground.png);
padding: 8px 14px 8px 14px;
width: 120px;
}

#navi #first a {
border-left: 1px solid #404040;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
}

#navi #last a {
border-right: 1px solid #404040;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
}[/CODE]

Danke schonmal.

Gruß Basti

[mermshaus]

Sorry, aber wenn ich das testen will, sehe ich rechts oben irgendwelche ineinander geschobenen Rahmen mit weißer Schrift auf weißem Grund. Außerdem hast du vermutlich in deinem HTML-Code das äußerste

vergessen. Poste bitte ein besseres Beispiel.

[Basti225]

Oh, sry

Hier

[HTML]

body{ background-color: #222; }

#navi, #navi ul { 
list-style-type:none; 
margin:0; 
padding:0; 

}
#navi {
margin-top: 50px;
margin-left: 750px;
display: block;
}

#navi a {
background-color: #111;
text-decoration: none;
font-family: Verdana;
font-size: 14px;
color: #fff;
padding: 18px 15px 15px 15px;
border-top: 1px solid #404040;
border-bottom: 1px solid #404040;
}

#navi a:hover {
background-color: #000;
}

#navi a:active {
color: #b4b4b4;
}

#navi li{
float:left;
margin: 0px;
}

#navi li ul {
display:none;
}

#navi li:hover ul {
display:block;
width: 85px;
margin-top: 15px;
}

#navi li:hover ul li a {
border: 0px;
}

#navi li:hover ul li a {
display: block;
background-color: #101010;
padding: 8px 14px 8px 14px;
width: 120px;
}

#navi #first a {
border-left: 1px solid #404040;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
}

#navi #last a {
border-right: 1px solid #404040;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
}

</style>

<ul id="navi">
<li id="first"><a href="index.php">Startseite</a></li>
<li><a href="designs.php">Themen</a>
	<ul> 
		<li><a href="desgins/invatio/invatio.php">Invatio</a></li>
	</ul>
</li>
<li><a href="tutorials.php">Tutorials</a></li>
<li id="last"><a href="kontakt.php">Kontakt</a>
	<ul> 
		<li><a href="kontakt.php">Kontakt</a></li>
		<li><a href="desgins/invatio/invatio.php">Werbung</a></li>
	</ul>
</li>
</ul>

[/HTML]

[threadi]

Der Code unterscheidet sich aber von dem im ersten Posting. Hier fehlen jetzt die Hintergrundbilder in „#navi a“ von denen Du sprachst?

Dennoch der Hinweis:
Schreibe

#navi li a

für alle Links und ändere für die im ausklappenden Menü die Eigenschaften per

#navi li li a

Hinweis: ich würde empfehlen die Link-Pseudoklassen :link, :visited, :hover, :active und :focus zu verwenden.

[Basti225]

Ja ich habe die Hintergrundbilder durch Farben ersetzt, damit ihr das auch sehen könnt
Okey ich probiere es mal aus

Hmmpf, funtz ned, die Dropdown Links an der Ecke sind nochimmer abgerundet und wenn ich das fenster kleiner ziehe, gehen die links übereinanderer!?!

[threadi]

Magst Du auch einen Link zeigen?

[Basti225]

Menü

[Assassins]

Ich habe gerade die Seite mit mein Netbook (10,1" 1026x600) besucht. Und die Menüpunkte überlappen. Meines erachtens liegt das hier ran:
[HTML]margin-left: 750px;
[/HTML]Nimm dort lieber eine Prozentangabe oder sage direkt, dass das Menü rechts sein soll…

Kann mich aber auch irren…

Edit:
Ok, wenn du dein ganzes Design auf einer festengröße festgelegt hast solltest du diese anpassen. Machst du es aber valider, also dass das Design sich automatisch anpasst, solltest du anstatt [HTML]margin-left: 750px;
[/HTML] lieber [HTML]float: right;[/HTML] benutzten. Das weitere Probleme, muss ich erstmal gucken

[Basti225]

Hmm, hat sich eig. nichts verändert :S

[neuroleptika]

Mit #navi #last a sprichst du alle Links in #navi #last an, auch die im Untermenü.
Du kannst sie aber wieder überschreiben.
Z.B mit:#navi #last ul a

@Basti225

Hmm, hat sich eig. nichts verändert :S

Ganz sicher ändert das was.

[Basti225]

Danke, ja es ändert was.
Aber die nur die Position, die Menüpunkte überlappen sich nach wie vor, wenn das Fenster zu klein ist.

[neuroleptika]

Aber nur noch wenn das Fenster wirklich sehr klein ist.
Im praktischen Einsatz, in einem Container mit ausreichender Breite wird es dazu wohl nicht kommen.

In welchen Browsern (- Versionen) soll es denn funktionieren?

[Basti225]

Ehm, es sollte in so gut wie allen Browsern funktionieren

[neuroleptika]

Bis einschließlich FF2 ist es unbedingt nötig der zweiten ul (#navi li ul) position: absolute zu geben.
Das ist auch in anderen Browsern nötig um später die nachfolgenden Elemente durch die ausklappenden Listen nicht zu beinflussen.
Dann braucht #navi li position:relative; als Ausgangsposition für die absolute Positionierung von #navi li: ul.
Für den IE<8 ist bestimmt noch left: 0 für #navi li ul und haslayout für #navi li a nötig.

[Basti225]

Danke
Habe jetzt noch eine Frage, das Dropdown Menü, beim Ausklappen sollte es ÜBER dem nachfolgendem Element sein, es ist aber unter dem Element?!

[neuroleptika]

Kann ich ohne aktuellen Link nicht sagen.
Ich kann mir aber vorstellen, daß das nachfolgende Element position: relative; oder position: absolute hat.
In dem Fall muß #navi li ul einen ausreichenden z-index haben.

[Basti225]

Hier ist nochmal der aktuelle Code.
Habe gerade noch einen Fehler entdeckt, der eben noch nicht da war-.-
Wenn ich auf das Dropdown menü gehe, geht es weg !?!

[CODE]#navi {
position: relative;
margin-top: -35px;
float: right;
display: block;
}

#navi a {
background-image: url(…/images/navibackground.png);
text-decoration: none;
font-family: Verdana;
font-size: 14px;
color: #fff;
padding: 18px 15px 15px 15px;
border-top: 1px solid #404040;
border-bottom: 1px solid #404040;
}

#navi a:hover {
background-image: url(…/images/navibackgroundhover.png);
}

#navi a:active {
color: #b4b4b4;
}

#navi li{
float:left;
margin: 0px;
}

#navi li ul {
display:none;
}

#navi li:hover ul {
display:block;
width: 85px;
margin-top: 15px;
}

#navi li:hover ul li a {
border: 0px;
}

#navi li:hover ul li a {
display: block;
background-image: url(…/images/navidropdownbackground.png);
padding: 8px 14px 8px 14px;
width: 120px;
}

#navi #first a {
border-left: 1px solid #404040;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
}

#navi #last a {
border-right: 1px solid #404040;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
}

#navi #last ul a, #navi #first ul a {
border: 0;
border-radius: 0;
-moz-border-radius 0;
}[/CODE]

[neuroleptika]

Ich mag mir das nicht zusammenbasteln.
Aber hier fehlen die Werte für position:

#navi li{
	float:left;
	margin: 0px;
[B][COLOR="#8b0000"]position: relative;[/B]
	}

#navi li ul {
	display:none;
[B][COLOR="#8b0000"]position: absolute;
left: 0; /* für IE<8 */[/B]
	}

[Basti225]

Und warum wenn ich über den 2 ten Dropdown menü punkt fahre, geht das Menü zu?

[neuroleptika]

Lade dein aktuelles Beispiel bitte hoch.