将下拉CSS导航栏向右对齐

Question

我的网页上有一个导航栏，与页面的右侧对齐，徽标位于左侧。因此，当最右侧项目的下拉菜单出现时，它会偏离页面的右侧并且看起来很混乱。特别是因为它使用 Alpha 背景。

这是我的代码：

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

我希望它看起来是这样的：

    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

而不是这个：

    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

（实际上稍微向右推，但没有以父级为中心

<ul> <li>

）

宽度必须设置为自动，因为要存储在导航栏中的文本之间的宽度范围很大。有的大约100px，有的接近300px。

Answer 1

这是固定的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;
/*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;
}

编辑：根据新限制更新了 CSS。