Dropdown: Dropdown nach links ausfahren

hallo,

ich komm nicht weiter. mein drop down menü, das rechts in einem div ausgerichtet sein soll, öffnet sich nicht so wie ich möchte.

Es funktioniert eigentlich, aber es verrutscht einfach beim hovern 150px komplett nach links (gerade die 150px, die das submenu nach links soll), was eigentlich nicht gewünscht ist. es soll sich ein menü nach unten öffnen, das nach links geöffnet ist, damit es nicht rechts im Bildschirmrand verschwindet.

kann mir jemand abhilfe schaffen? wäre da echt dankbar. Sollte so aussehen wie bei mobile, das menü wo man über den punkt "Händler" mit der maus fährt. Ich sehe nur den Wald vor lauter Bäumen nicht, das ich das nicht hinbekomme? Ich kann nicht erkennen, in welcher relation das mit left-150 versehene ul element, mit dem ersten element ul zusammenhängt, obwohl ich es nur für das submenu definiert habe.

/* ===== Menü nach links ===== */  
  
/* ===== Menü nach links ===== */  
  
.ddm {  
	float:right;  
	position:relative;  
	z-index:3;  
}  
.ddm > li {  
	position:absolute;  
	right:0px;  
}  
.ddm a.e1 {  
	border:1px solid transparent;  
	border-top:none;  
	color:#000;  
	display:inline-block;  
	padding:6px 10px;  
	width:30px;  
	position:relative;  
	z-index:5;  
}  
.ddm a {  
	border-bottom:transparent !important;  
}  
.ddm li:hover a.e1 {  
	background:linear-gradient(to bottom,#FFF,#FBFBFB,#FDFDFD) #FBFBFB;  
	border:1px solid #000;  
	border-top:none;  
	color:#333;  
}  
  
  
/*--- Submenü ---*/  
  
.ddm li ul {  
	background:#FDFDFD;  
	border:1px solid #000;  
	display:none;  
	margin-top:-1px;  
	width:200px;  
}  
.ddm li:hover ul {  
	display:block;  
		position:relative;  
left:-150px;  
	z-index:4;  
}  
.ddm li ul li {  
	display:block;  
	float:none;  
  
}  
.ddm li ul li a {  
	display:block;  
	padding:3px 10px;  
}  
.ddm li ul li:hover {  
	background:#F90;  
}  
.ddm li ul li:hover a {  
	color:#FFF;  
}
<ul class='ddm'>  
<li><a href='/' class='e1 dd'>DU</a>  
	<ul>  
	<li><a href='/' rel='nofollow'>Punkt 44</a></li>  
	<li><a href='/' rel='nofollow'>Punkt 43</a></li>  
	<li><a href='/' rel='nofollow'>Punkt 42</a></li>  
	<li><a href='/'>Punkt 41</a></li>  
	</ul>  
</li>  
</ul>

Soll nur CSS sein. Danke.

  1. Om nah hoo pez nyeetz, Dropdown!

    kann mir jemand abhilfe schaffen?

    Setze bitte einen Link zur problematischen Seite

    wäre da echt dankbar.

    … wenn ich das nicht selbst nachbauen muss.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen KA und Kadaver.

    1. Aloha ;)

      Setze bitte einen Link zur problematischen Seite

      Kann Matthias da nur zustimmen. Aber weil ich zu viel Zeit hab, hab ich deinen geposteten code mal durch dabblet.com gejagt und ein bisschen mit den Chrome-Developer-Tools gespielt.

      Folgendes ist dein Problem: Sobald dein Dropdown öffnet, setzt du die innere ul visuell nach links weg. Faktisch - das heißt was das Eltern-Element li betrifft - ist sie aber immer noch da und das Eltern-Element li wird bei Erscheinen automatisch breiter und dadurch nach links verschoben.

      Die Lösung: Es gibt mehrere Möglichkeiten...

      Möglichkeit 1 - wie es mobile.de macht:

      mobile.de hat das Eltern-li relativ positioniert und das Kind-ul absolut. Dadurch wird das Kind-ul aus dem Kontext des Eltern-li gerissen und das Eltern-li wird nicht mehr größer sobald Kind-ul auftaucht. Vorteil: Die verschiedenen Dropdowns bzw. ihre "Öffner" können unterschiedlich breit sein. Nachteil: Zumindest ich persönlich finde den Wechsel zwischen relative / static / absolute ziemlich nervtötend zum Programmieren...

      Möglichkeit 2 - wie ich es schon gemacht habe:

      Wenn du vermeiden willst, dass sich das Elternelement vergrößert, musst du ihm eine max-width mitgeben. Es gibt insgesamt eine Vielzahl an Gründen, warum man die Anzeigegröße des Eltern-li genau kontrollieren möchte. Meine Lösung ist vielleicht etwas krass, aber ich würde einfach das Layout betrachten, mir ansehen wie viel Platz der "Öffner" im Layout einnehmen soll und seine Breite dann durch gleichzeitige Angabe von width, min-width und max-width zementieren. Und schwuppdiwupp verschiebt sich nix mehr ;) Wenn eine width für das Eltern-/Öffner-li nicht von vornherein festgelegt werden kann oder werden soll ist Möglichkeit 1 die bessere Alternative.

      Und als allgemeiner Hinweis: Wenn dir nochmal sowas unterkommt, dann schnapp dir Google Chrome und seine Entwicklertools. Da kann man per "force state" Elemente zwangsweise auf "hover" setzen, sodass man bequem nach dem Fehler suchen kann. Alternativ kann FireBug für Firefox das sicher so oder so ähnlich auch.

      Grüße,

      RIDER

      --
      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
      ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[