Listen, Ul Ul nicht an richtiger stelle

[oozaru]

Guten Tag,

Ich habe ein problem das ich nicht lösen kann. Ich erstelle zurzeit eine Homepage für meinen jugendfreund und habe auf dieser Seite http://loetscher-ag.com/wordpress/ ein Dropdown eingerichtet.

Wenn man auf Automatische Türen... geht erscheint das dropdown, nun wenn man darunter auf tore geht das 2. jedoch ist diese postition wo dieses zweiter erscheint durch einen margin definiert. was aber wenn man z.b über dienstleistungen fährt ja auch der fall ist aber eben nicht sein sollte.

Nun meine frage, wie erreiche ich das die 2. Unterkategorie immer gleich recht von der ersten unterkategorie auftaucht, ich verstehe das ich es nicht durch einen wert erreichen kann aber ich kann nicht verstehen wie ich es sonst definieren kann.

Ich hoffe ihr könnt mir helfen,

hier noch ein css code schnipsel

#globalNavi{
	margin-top: 15px;
	padding:0;
	height:43px;
	background-image:url(images/navibg.gif);
	position:absolute;
	width:100%;
	text-align: left;
	}
#globalNavi ul {
	margin: 0;
	padding: 0;
	width:75%;
	float:left;
}
#globalNavi ul li {
	margin-left: 0;
	list-style:none;
	height:43px;
	border-left: 1px solid #666666;
    border-right: 1px solid #666666;
	background-image:url(images/navibg.gif);
	float: left;
    text-align: left;
}
#globalNavi ul ul{
	display:none;
	position:absolute;
	float:left;
	width:150px;
	display:none
}
#globalNavi ul ul li{
	min-width:149px;
	left:30px;
	height:40px;
	border-bottom:0px solid #000;
	border-top: 1px solid #555555;
}
#globalNavi ul ul ul{
	left:100%;
	margin-top: 82px;
	margin-left: 1px;
	top:0;
}

#globalNavi ul ul ul li{
	border-bottom: 0px solid #000000;
    border-left: 1px solid #CCCCCC;
    border-top: 1px solid #555555;
    height: 40px;
    left: 30px;
    min-width: 175px;
    text-align: left;
}

#globalNavi ul li:hover > ul{
	display:block;
	z-index:88
}
#globalNavi ul li.current_page_item {
	background:#999999;
}
#globalNavi ul li.current_page_item:hover {
	background:#999999;
}
#globalNavi ul li:hover{
	background:#000;
}
#globalNavi ul li a {
	color:#FFF;
	padding:12px 15px 0 15px;
	display:block;
	height:30px;
	margin-top: 1px;
	text-decoration: none;
}
#globalNavi ul li a:hover{
	color:#fff;
}

 

[hela]

..., wie erreiche ich das die 2. Unterkategorie immer gleich recht von der ersten unterkategorie auftaucht, ich verstehe das ich es nicht durch einen wert erreichen kann aber ich kann nicht verstehen wie ich es sonst definieren kann.

Hallo,

entsprechend deinem CSS-Fragment sind in der Menüliste folgende Elemente absolut positioniert: [#globalNavi], [#globalNavi ul ul] und somit auch [#globalNavi ul ul ul].

Die LI-Elemente [#globalNavi ul ul li] und [#globalNavi ul ul ul li] sind überhaupt nicht positioniert und haben aber LEFT-Eigenschaften erhalten, die damit wohl unwirksam sein müssten. Die Ausrichtung der UL-Element richtet sich also nach dem UL-Vorfahren und nicht nach dem LI-Elternelement.

Vermutlich hat im [#globalNavi ul ul li]-Selektor mal "position:relative" gestanden. Schreib das mal dort rein, vielleicht hilft das.

 

[oozaru]

Danke vielmals das hat soweit schon super funktioniert, jetzt hab ich jedoch ein anderes problem, und zwar wenn man das menu nun anschaut ist die erste unterkategorie leicht nach oben verschoben und die 2. unterkategorie im verhältnis zur ersten leicht nach unten jedoch nehme ich an das sie beide im verhältnis zum uhrsprung nach unten verschoben sind.

ich finde keinen wert wie ich diese gerade bringen kann, also ich habs mit negativen margins versucht, aber kein erfolg.

hier der neue code

#globalNavi{
	margin-top: 15px;
	padding:0;
	height:43px;
	background-image:url(images/navibg.gif);
	position:absolute;
	width:100%;
	text-align: left;
	}
#globalNavi ul {
	margin: 0;
	padding: 0;
	width:75%;
	float:left;
}
#globalNavi ul li {
	margin-left: 0;
	list-style:none;
	height:43px;
	border-left: 0px solid #666666;
    border-right: 0px solid #666666;
	background-image:url(images/navibg.gif);
	float: left;
    text-align: left;
}
#globalNavi ul ul{
	display:none;
	position:relative;
	float:left;
	width:150px;
	display:none
}
#globalNavi ul ul li{
	min-width:150px;
	left:30px;
	border-bottom:0px solid #000;
	border-top: 1px solid #555555;
}
#globalNavi ul ul ul{
	left:100%;
	position:relative;
	top:0;
}

#globalNavi ul ul ul li{
	border-bottom: 0px solid #000000;
    border-left: 1px solid #CCCCCC;
    border-top: 1px solid #555555;
    left: 30px;
    min-width: 175px;
    text-align: left;
}

#globalNavi ul li:hover > ul{
	display:block;
	z-index:88
}
#globalNavi ul li.current_page_item {
	background:#999999;
}
#globalNavi ul li.current_page_item:hover {
	background:#999999;
}
#globalNavi ul li:hover{
	background:#000;
}
#globalNavi ul li a {
	color:#FFF;
	padding:12px 15px 0 15px;
	display:block;
	margin-top: 1px;
	text-decoration: none;
}
#globalNavi ul li a:hover{
	color:#fff;
}

 

[oozaru]

Es hat sich noch ein zweites problem aufgetan, beim Metallbau, wenn man auf das Dropdown fährt wird das metallbau feld auch so gross wie das dropdown menu, also ich bin sichtlich überfordert.

hoffentlich kann mir jemand helfen.

mfg

 

[djheke]

Hallo,
versuch mal folgendes.

#globalNavi{
position:relative;
...
}

#globalNavi ul ul {
  position:absolute;
  top:43px;
 ...
  ...
}

Sollte funktionieren.