Question

基本上，我页面上的导航栏与页面的右侧对齐，左侧是徽标。因此，当最右侧项目的下拉菜单出现时，它会偏离页面的右侧并且看起来很乱。特别是因为它正在使用aplha背景。

无论如何，这是我目前的代码..

HTML：

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

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

基本上这就是我希望它看起来......

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。

将下拉css导航栏对齐到右侧

1 个答案: