1

基本的に、私のページのナビゲーション バーはページの右側に配置され、左側にロゴが配置されています。このため、右端のアイテムのドロップダウンが表示されると、ページの右側からずれて乱雑に見えます。特に 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>)

ナビゲーション バーに保存されるテキスト間の幅は非常に広いため、幅は auto に設定する必要があります。100px程度のものもあれば、300px近くのものもあります

4

1 に答える 1

2

固定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 を更新しました。

于 2012-08-19T17:11:06.503 に答える