Dropdown nach links ausfahren

[Dropdown]

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.