Can anybody help with this CSS menu?

[mdminternet]

Hey guys,

I've spend the best part of two hours trying to work this out and have looked at various css resources online before giving up and posting here. I'm sure the answer is quite obvious.

Below is the css I have for a simple drop down menu, nothing fancy but it does its job.

.menu ul { width: 486.75px; height: 50px; font-size: 1em; font-weight: bold; list-style: none; margin: 0px; padding: 0px; float: left; }
.menu li { width: 162.25px; float: left; padding: 0px; font-weight: bold; }
.menu li a { color: #ffffff; font-weight: bold; display: block; line-height: 50px; margin: 0px; padding: 0px; text-align: left; text-decoration: none; }
.menu li a:hover, .menu ul li:hover a { background: #f1f1f1; color: #0054a6; font-weight: bold; text-decoration: none; }
.menu li ul { background: #f1f1f1; color: #0054a6; display: none; height: auto; padding: 0px; margin: 0px; border: 0px; width: auto; position: absolute; z-index: 200; /*top:1em; /*left: 0;*/ }
.menu li:hover ul { display: block; color: #0054a6; font-weight: normal; }
.menu li li { color: #0054a6; font-weight: bold; display: block; float: none; margin: 0px; padding: 0px; width: auto; }
.menu li:hover li a { background-color: #f1f1f1; color: #0054a6; font-weight: bold; }
.menu li ul a { display: block; height: 50px; font-size: 0.85em; color: #0054a6; margin: 0px; padding: 0px 15px 0px 15px; text-align: left; }
.menu li ul a:hover, .menu li ul li:hover a { background-color: #ffffff; border: 0px; color: #0054a6; font-weight: bold; text-decoration: none; }
.menu p { clear: left; }

And here is the html for the menu...

<div class="menu">
<ul>
<li><a href="http://www.test.net" target="_self" >About</a><ul><li><a href="http://www.test.net/" target="_self" >Find out about us and our company...</a></li></ul></li>
<li><a href="http://www.test.net" target="_self" >Services</a><ul><li><a href="http://www.test.net/" target="_self" >Find out what we can do for you...</a></li></ul></li>
<li><a href="http://www.test.net" target="_self" >Prices</a><ul><li><a href="http://www.test.net/" target="_self" >Check out our great value prices...</a></li></ul></li>
</ul>
</div>

As you can see, at the moment the dropdown contains a small description which aligns with the left side of the main element. What I would like to know is how would I go about having it align with the right side instead (not the text in the dropdown but the dropdown itself)?

Thanks in advance.

@mdminternet

I've spend the best part of two hours trying to work this out and have looked at various css resources online before giving up and posting here. I'm sure the answer is quite obvious.

It would be nice if you have an image on how it looks.

[simplypixie]

.menu {
float: right;
}

[JorgeM]

If you still need help, a better indication of how you want the layout to look like would be helpful. LastMitch's suggestion regarding an image would work fine.