html - How to get Sub Menu to right align using CSS -

I am struggling with this for a while, I have a website but I have trouble getting it To get the right alignment I can get to align the main part of the menu, but I'm having trouble getting the sub menu to do this.

It gives me this effect:

HTML is:

  & lt; Div id = "new" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A & gt; Content & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A & gt; More content & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A & gt; Support with sub-accessories & lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A & gt; Subject 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A & gt; Subject 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt;  

And CSS is: (I know that due to the mess I may have a little bit confused to try to align it right)

  #nav {height: 30px; Width: 100%; Status: Relative; Top: -60px; Background: # 5D2C2C; } # Nav A {font: "lucida sans unicode", "lucida grande", without-serif; Color: #CCC; Text-decoration: none; } #nav ul {height: 20px; Top: 5px; Margin: 0px; List-style: none; Status: Relative; Text-align: okay, #nuul lei {margin: 5px; Display: Inline; Status: Relative; Height: 20px; Height: 20px; Padding-left: 10px; Hidden flurry; } #nav ul li ul li {list-style: none; Status: Relative; Swim left; Width: 200px; Height: 20px; Margin: 0; Background: # 5D2C2C; } #nav ul li ul {height: 20px; Padding: 0 px 0 px; Status: Relative; Margin: 0 0 0 0; Width: 200px; } #NUUUL Lee: Hover {background: # 900; Overflow: visible; } #nav ul li ul li: hover {background: # 000; Overflow: visible; }  

Any help would be appreciated

.. Or you can try to use the full position as a sub element:

  #nav ul li ul {position: absolute; Correct: 0px; Top: 25px; }