CSS dropdown menu open to the left?

[radiator251]

I'm trying to get the dropdown forms on the top of my site to open to the left, so that their right edge aligns with the right edge of the <li> above them. (hover over "login" and "sign up" to see what I mean.)

I've tried float:right on #login li ul, float:right on #login li, and also right-margins. I don't think margins work because in order to control the display of the dropdowns I use position:absolute and change it from left:-999em to left:auto.

Is there a way to do this that I'm missing?

Relevant css:

.contentdrop ul{
 list-style:none;
 margin:0;
 padding:0; 
}
.contentdrop li {
 float:left;
 margin-right:10px;
 padding:0px;
 display:block;
 height:15px;
 
}
.contentdrop li ul {
 list-style: none;
 position: absolute;
 width: 200px; 
 float:left; 
 left:-999em;
 -moz-border-radius-topright:5px;
 -moz-border-radius-bottomright:5px;
 -moz-border-radius-bottomleft:5px;
 -webkit-border-top-right-radius:5px;
 -webkit-border-bottom-right-radius:5px;
 -webkit-border-bottom-left-radius:5px;
}
.contentdrop li:hover ul, .contentdrop li.sfhover ul {
 left: auto;
}
.contentdrop li li {
 float: left;
 padding: 0;
 width: 180px;
 padding:10px;
 height:auto;
 margin:0; 
}

Thanks!

[edited by: encyclo at 4:08 am (utc) on Nov. 28, 2009]
[edit reason] no links to personal sites please, see posting guidelines [/edit]

[swa66]

Loose the floats.

Use the absolute positioning, dig a bit in on that alone so you really get how it works.

An element with absolute positing can have it's boundary set by using left/right/top and bottom: set the right one to what you want.

If you want it to match the parent's <li> right side: you need to give that <li> "position" so it is used as a reference by the child. Easiest way is to add position:relative to that parent.And then use right:0 on the absolutely positioned child.

[radiator251]

Thanks, I've never really fooled around with position before, so that's good to know for the future. Works like a charm.