Aligning drop-down css navigation bar to the right - drop-down-menu

Question

Basically the navigation bar on my page is aligned to right hand side of the page with the logo on its left. Because of this when the drop down for the far right item appears, it drifts off the right side of the page and looks messy. Especially as it's using an aplha background.
Anyway, here is my code at the moment..
HTML:
<ul class="Nav2">
<li>
Category 1
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Category 2
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Category 3
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Category 4
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Category 5
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
</ul>
CSS:
ul.Nav2 {
list-style-type:none;
margin:0 auto;
padding:0;
overflow:hidden;
width:auto;
}
ul.Nav2 li {
float:right;
}
ul.Nav2 li a {
font-family:"Orator Std";
font-size:16px;
color:#000;
display:block;
width:auto;
height:20px;
line-height:20px;
border-left:1px Solid rgba(0,0,0,255);
background-color:#CCC;
text-align:center;
text-decoration:none;
opacity:0.6;
padding:0px 10px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
ul.Nav2 li a:hover {
opacity:1;
}
ul.Nav2 ul {
list-style:none;
position:absolute;
left:-9999px;
text-align:right;
}
ul.Nav2 ul li {
padding-top:1px;
float:none;
}
ul.Nav2 ul a {
white-space:nowrap;
}
ul.Nav2 li:hover ul {
left:inherit;
}
ul.Nav2 li:hover a {
background:#FFF;
text-decoration:none;
}
ul.Nav2 li:hover ul a {
text-decoration:none;
}
ul.Nav2 li:hover ul li a:hover {
background:#FFF;
}
Basically this is how I WANT it to look....
Category 1 Category 2 Category 3 Category 4 Category 5
Item 1 Item 1 Item 1 Item 1 Item 1
Item 2 Item 2 Item 2 Item 2 Item 2
Rather than...
Category 1 Category 2 Category 3 Category 4 Category 5
Item 1 Item 1 Item 1 Item 1 Item 1
Item 2 Item 2 Item 2 Item 2 Item 2
(It's actually pushed to the right slightly but not centered to the parent <ul> <li>)
The width MUST be set to auto because of the huge range in widths between the text that is gunna be stored in the navigation bar. Some are about 100px and some are nearly 300px

Answer 1

Here's the fixed CSS. Removed and added styles are commented.
ul.Nav2 {
list-style-type:none;
margin:0 auto;
padding:0;
overflow:hidden;
width:auto;
}
ul.Nav2>li {
float:right;
}
ul.Nav2 li a {
font-family:"Orator Std";
font-size:16px;
color:#000;
display:block;
width:auto;
height:20px;
line-height:20px;
border-left:1px Solid rgba(0,0,0,255);
background-color:#CCC;
/*removed
text-align:center;
*/
text-decoration:none;
opacity:0.6;
padding:0px 10px;
;
;
;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
ul.Nav2 li a:hover {
opacity:1;
}
ul.Nav2 ul {
list-style:none;
position:absolute;
left:-9999px;
text-align:right;
float:right
/*added*/
display:block;
padding:0;
min-width:9.3ex;
}
ul.Nav2 ul li {
padding-top:1px;
float:none;
}
ul.Nav2 ul a {
white-space:nowrap;
}
ul.Nav2 li:hover ul {
left:inherit;
}
ul.Nav2 li:hover a {
background:#FFF;
text-decoration:none;
}
ul.Nav2 li:hover ul a {
text-decoration:none;
}
ul.Nav2 li:hover ul li a:hover {
background:#FFF;
}
EDIT: Updated CSS based on new restriction.