• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Dropdown Menü Fehler

B

Basti225

Neues Mitglied
Hey :D
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: 
	<li id="first"><a href="#">Punkt1</a></li>
	<li><a href="#">Punkt2</a>
		<ul> 
			<li><a href="#">1.0</a></li>
		</ul>
	</li>
	<li><a href="#">Punkt3</a></li>
	<li id="last"><a href="#">Punkt4</a>
		<ul> 
			<li><a href="#">4.0</a></li>
			<li><a href="#">4.1</a></li>
		</ul>
	</li>

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

Danke schonmal.

Gruß Basti
 
Werbung:
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 <ul> vergessen. Poste bitte ein besseres Beispiel.
 
Oh, sry

Hier

HTML: 
<!DOCTYPE html>
<html>
<head>
	<style>
	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>
</head>
<body>

	<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>
	
</body>
</html>
 
Werbung:
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

Code: 
#navi li a

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

Code: 
#navi li li a

Hinweis: ich würde empfehlen die Link-Pseudoklassen :link, :visited, :hover, :active und :focus zu verwenden.
 
Ja ich habe die Hintergrundbilder durch Farben ersetzt, damit ihr das auch sehen könnt :D
Okey ich probiere es mal aus :D

Hmmpf, funtz ned, die Dropdown Links an der Ecke sind nochimmer abgerundet und wenn ich das fenster kleiner ziehe, gehen die links übereinanderer!?!
 
Zuletzt bearbeitet:
Werbung:
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;
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;
lieber
HTML: 
float: right;
benutzten. Das weitere Probleme, muss ich erstmal gucken
 
Zuletzt bearbeitet:
Werbung:
Danke, ja es ändert was.
Aber die nur die Position, die Menüpunkte überlappen sich nach wie vor, wenn das Fenster zu klein ist.
 
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?
 
Werbung:
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.
 
Danke :D
Habe jetzt noch eine Frage, das Dropdown Menü, beim Ausklappen sollte es ÜBER dem nachfolgendem Element sein, es ist aber unter dem Element?!
 
Werbung:
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.
 
Hier ist nochmal der aktuelle Code.
Habe gerade noch einen Fehler entdeckt, der eben noch nicht da war-.- :D
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;
	}
 
Ich mag mir das nicht zusammenbasteln.
Aber hier fehlen die Werte für position:
Code: 
#navi li{
	float:left;
	margin: 0px;
[B][COLOR="#8b0000"]position: relative;[/COLOR][/B]
	}

#navi li ul {
	display:none;
[B][COLOR="#8b0000"]position: absolute;
left: 0; /* für IE<8 */[/COLOR][/B]
	}
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben