✔ DropDown wird nicht angezeigt

[Merbi]

Hey liebes Forum,

ich sitze zurzeit an einem Projekt und komme bei einem Problem mit einem DropDown Menü nicht weiter.

Es ist hier eingebunden in die Homepage zu sehen. Der Link "Über uns" sollte mit Drop Down sein.

Das CSS der Navigation ist folgendes:

ul#rightnav {
	margin-top: 151px;
	text-align: left;
}

ul#leftnav {
	margin-top: 65px;
	text-align: right;
}

ul#rightnav, #leftnav {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 25px;
	font-weight: bold;
	color: #CECFD0;
	text-decoration: none;
	border: 0;
	position: relativ;
	display: block;
	width: 200px;
	height: 25px;
}

ul#rightnav, #leftnav a { 
	text-decoration: none;
	display: inline-block;
	width: 100%;
	color: #A0A0A0;
	border: 0;
	border-bottom: 5px solid #C10A0A;
}

ul#rightnav, #leftnav a:hover { 
	color: #A0A0A0;
	text-decoration: none;
	background-color: #FFFFFF;
	border: 0;
	border-bottom: 5px solid #FFFFFF;
}

ul#rightnav, #leftnav li {
	margin: 0;
	position: relative;
	width: auto;
	padding: 0 7px 0 7px;
	display: inline;
}

ul#rightnav, #leftnav li>a { 
	width: auto;
}

ul#rightnav, #leftnav li ul { 
	z-index: 1000;
	margin: 0;
	padding: 0;
	list-style-type: none;
	visibility: hidden;
	position: absolute;
	left: 0px;
	top: 25px;
}

ul#rightnav, #leftnav li>li { 
	float: none;
}

Ein weiteres Problem was aufgetreten ist, seit ich das Drop Down einbinden möchte ist, dass Rechts neben dem Inhaltsbereich auch Zwei Links sein sollte, die seitdem nicht mehr zu sehen sind.

Ich hoffe ihr könnt mir helfen und das die Seite ansonsten in allen Browsern läuft.

Liebe Grüße.

Daniel

 

[Maik]

Hi,

dass das Untermenü nicht eingeblendet wird, liegt am folgenden fehlenden Selektor:

#leftnav li:hover ul {
        visibility: visible;
}

Und dann schau dir mal diesen Selektor genauer an, weshalb das rechte Menü in der Seite überhaupt nicht erscheint:

ul#rightnav, #leftnav li ul {
        z-index: 1000;
        margin: 0;
        padding: 0;
        list-style-type: none;
        visibility: hidden;
        position: absolute;
        left: 0px;
        top: 25px;
}

Desweiteren sollte für das rechte Menü anstelle von left:0 die Startposition right:0 lauten.

mfg Maik

 

[Merbi]

Hey Maik,

habe die Änderungen nun vorgenommen, jedoch hängt nun die Rechte Navi zu weit oben. Ebenfalls denke ich, dass sich auf der Seite Fehler eingeschlichen haben, die dazu führen können, dass die Seite nicht richtig dargestellt wird, insbesondere in den verschiedenen Browsern.

Liebe Grüße.

Daniel

 

[Maik]

Moin.

ul#rightnav {
        top: 151px;
        text-align: center;
}

Und korrigiere hier mal den Tippfehler:

ul#rightnav, #leftnav {
        ...
        position: relative;
        ...
}

mfg Maik

 

[Merbi]

Danke für die wiedermal schnelle und gute Hilfe Maik
Habe nur noch eine kleine VErständnisfrage, wieso funktioniert denn bei der leftnav "margin-top" und in der rightnav nur "top"?

Liebe Grüße und einen schönen Sonntag.

Daniel

 

[Maik]

Das hängt kurioserweise mit den unterschiedlich gewählten Selektoren (Elementtyp + ID-Bezeichner vs. ID-Bezeichner) zusammen - margin-top würde in dieser Konstellation ebenso funktionieren:

ul#rightnav {
        margin-top: 151px;
        text-align: center;
}

ul#leftnav {
        margin-top: 65px;
        text-align: center;
}

#rightnav, #leftnav {
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 25px;
        font-weight: bold;
        color: #CECFD0;
        text-decoration: none;
        border: 0;
        position: relative;
        display: block;
        width: 200px;
        height: 25px;
}

mfg Maik

 

[Merbi]

Ok, Danke, sehr kurios

 

[Merbi]

Guten Morgen Forum

ich muss da doch nochmal stören :-(
Ich habe das Menü jetzt soweit an das Design angepasst und mit den richtigen Linknamen gefüllt und bin auf folgendes Problem gestoßen:

ul#rightnav li>a, ul#leftnav li>a {
padding: 0 8px 0 8px;
margin: 0;
width: auto;
}

Die Dowpdownlinks werden nicht mittig unter dem Hauptlinks dargestellt, da diese je nachdem verschieden breit sind, ich kann aber nicht mit einer festen Breite arbeiten, da sonst nicht jeder Linkname möglich ist. Ebenfalls ist es nicht möglich die Dropdownlinks mit text-align: left zu deklarieren.

Ich hoffe ihr könnt mir weiterhelfen.

Liebe Grüße.

Daniel

P.S. Die Seite liegthier.

Ich kann auf Wunsch auch den vollständigen CSS Code posten.

 

[Maik]

Moin,

bei mir werden die Sublinks sehr wohl horizontal zentriert unter den Hauptlinks ausgerichtet, ausschlaggebend sind dafür diese Regeln:

ul#rightnav {
        top: 152px;
        text-align: center;
}

ul#leftnav {
        top: 66px;
        text-align: center;
}

Ebenfalls ist es nicht möglich die Dropdownlinks mit text-align: left zu deklarieren.

Aber sicher ist das möglich:

ul#rightnav ul {
        text-align: left;
}

ul#leftnav ul {
        text-align: left;
}

mfg Maik

 

[Merbi]

Hey,

Danke Dir, das mit dem text-align: left; funktioniert auch, jedoch läuft das mit dem center bei mir nicht.

Ich habe mal einen Screenshot hochgeladen, wie ich das meine
Das Problem ist, dass z.B. die Unterlinks von Produkte Rechts weit über dieser Wort hinauslaufen.

Liebe Grüße.

Daniel

Edit: Desweiteren ist das Dropdown Links nicht so breit, wie sein Inhalt, da er zwischen "Über" und "CarryPlotter" einen Zeilenumbruch macht, was er jedoch Rechts macht :-(