Aligning drop-down css navigation bar to the right

I have a navigation bar on my webpage that is aligned to right-hand side of the page with the logo to 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 alpha background.

Here is my code:

<ul class="Nav2">
  <li>
    <a href="">Category 1</a>
      <ul>
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
      </ul>
  </li>
  <li>
    <a href="">Category 2</a>
      <ul>
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
      </ul>
  </li>
  <li>
    <a href="">Category 3</a>
      <ul>
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
      </ul>
  </li>
  <li>
    <a href="">Category 4</a>
      <ul>
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
      </ul>
  </li>
  <li>
    <a href="">Category 5</a>
      <ul>
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
      </ul>
  </li>
</ul>

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;
}

I would like it to look that this:

    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 this:

    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 going to be stored in the navigation bar. Some are about 100px and some are nearly 300px.

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.