将下拉菜单定位到中心时出现问题

时间：2014-02-27 23:29:05

标签： html css drop-down-menu

我是HTML / CSS的新手并且还在学习，但是现在我已经卡住了。

我尝试使用right中的.womenswear ul标记将下拉菜单移至中心，但是当我尝试使用right标记定位下拉菜单时没有任何反应。

这就是现在的样子：

enter image description here

您可以看到下拉菜单正在右侧移出。

这就是我想要实现的目标：

enter image description here

以下是代码：

HTML code：

<nav class="navigation">
<ul>
<li class="menswear"><a href="#">MEN'S WEAR</a>
  <ul>
    <li class="dropdown1"><a href="#">TOPWEAR</a>
      <ul>
        <li><a href="#">Jackets & Coats</a></li>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Overshirts</a></li>
        <li><a href="#">T-Shirts</a></li>
        <li><a href="#">Basic T-Shirts</a></li>
        <li><a href="#">Knitwear</a></li>
        <li><a href="#">Sweats</a></li>            
      </ul>
    </li>

    <li class="dropdown1"><a href="#">BOTTOMWEAR</a>
      <ul>
        <li><a href="#">Jeans</a></li>
        <li><a href="#">Colour Jeans</a></li>
        <li><a href="#">Pants</a></li>
        <li><a href="#">Shorts</a></li>   
      </ul>
    </li>

    <li class="dropdown1"><a href="#">FOOTWEAR</a>
      <ul>
        <li><a href="#">Boots</a></li>
        <li><a href="#">Sandals</a></li>
        <li><a href="#">Shoes</a></li>
        <li><a href="#">Snickers</a></li>         
      </ul>
    </li>

    <li class="dropdown1"><a href="#">ACCESSORIES</a>
      <ul>
        <li><a href="#">Belts</a></li>
        <li><a href="#">Caps</a></li>
        <li><a href="#">Hats</a></li>
        <li><a href="#">Scarves</a></li>
        <li><a href="#">Gloves</a></li>
        <li><a href="#">Sunglasses</a></li>
        <li><a href="#">Watches</a></li>
        <li><a href="#">Jewelry</a></li>              
      </ul>
    </li>

    <li class="dropdown1"><a href="#">SALE</a>
      <ul>
        <li><a href="#">Jackets & Coats</a></li>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Overshirts</a></li>
        <li><a href="#">T-Shirts</a></li>
        <li><a href="#">Basic T-Shirts</a></li>
        <li><a href="#">Knitwear</a></li>
        <li><a href="#">Sweats</a></li>            
      </ul>
    </li>

  </ul>
</li>
</ul>

<ul>
<li class="womenswear"><a href="#">WOMEN'S WEAR</a>
  <ul>
    <li class="dropdown2"><a href="#">TOPWEAR</a>
      <ul>
        <li><a href="#">Jackets & Coats</a></li>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Overshirts</a></li>
        <li><a href="#">T-Shirts</a></li>
        <li><a href="#">Basic T-Shirts</a></li>
        <li><a href="#">Knitwear</a></li>
        <li><a href="#">Sweats</a></li>            
      </ul>
    </li>

    <li class="dropdown2"><a href="#">BOTTOMWEAR</a>
      <ul>
        <li><a href="#">Jeans</a></li>
        <li><a href="#">Colour Jeans</a></li>
        <li><a href="#">Pants</a></li>
        <li><a href="#">Shorts</a></li>   
      </ul>
    </li>

    <li class="dropdown2"><a href="#">FOOTWEAR</a>
      <ul>
        <li><a href="#">Boots</a></li>
        <li><a href="#">Sandals</a></li>
        <li><a href="#">Shoes</a></li>
        <li><a href="#">Snickers</a></li>         
      </ul>
    </li>

    <li class="dropdown2"><a href="#">ACCESSORIES</a>
      <ul>
        <li><a href="#">Belts</a></li>
        <li><a href="#">Caps</a></li>
        <li><a href="#">Hats</a></li>
        <li><a href="#">Scarves</a></li>
        <li><a href="#">Gloves</a></li>
        <li><a href="#">Sunglasses</a></li>
        <li><a href="#">Watches</a></li>
        <li><a href="#">Jewelry</a></li>              
      </ul>
    </li>

    <li class="dropdown2"><a href="#">SALE</a>
      <ul>
        <li><a href="#">Jackets & Coats</a></li>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Overshirts</a></li>
        <li><a href="#">T-Shirts</a></li>
        <li><a href="#">Basic T-Shirts</a></li>
        <li><a href="#">Knitwear</a></li>
        <li><a href="#">Sweats</a></li>            
      </ul>
    </li>
  </ul>
</li>
</ul>
</nav>

CSS代码：

    .navigation {
        top: 20px;
      position: relative;
        background-color: #fff;
        width: 1024px;
        height: 42px;
        margin: 0 auto;
      -webkit-font-smoothing:antialiased;
    }

    .navigation a {
      -webkit-transition: all .25s ease;
          -moz-transition: all .25s ease;
           -ms-transition: all .25s ease;
            -o-transition: all .25s ease;
               transition: all .25s ease;
    }


    /* MEN'S WEAR BUTTON */

    .menswear { 
      width:130px !important;
      height: 42px;
      float:left;
      list-style: none;
      background: #ddd;
      position: relative;
     }

     .menswear ul {
      overflow:hidden;
      background:black;
      opacity: 0.5px;
      width:1024px;
      height:300px;
      opacity: 0;
      position: relative;
      top:26px;
      visibility: hidden;
      z-index: 1;
      -webkit-transition: all .25s ease;
         -moz-transition: all .25s ease;
          -ms-transition: all .25s ease;
           -o-transition: all .25s ease;
              transition: all .25s ease;  
    }

    .menswear:hover ul { visibility: visible; opacity: 0.9; }



    .menswear a {

      text-decoration: none;
      position: relative;
      top: 12px;
      font-weight: bold;
      padding: 9px 15px 11px 14px;
      color: #000;

    }

    .menswear a:hover {
        background: #000;
        color: #000;
    }

    .menswear a:hover:nth-child(1) { color: #fff; }



    .menswear li { background: transparent; }



    .dropdown1:nth-child(1) {
      float: left;
      position: relative;
      list-style: none;
      right: 40px;
      padding-bottom: 96px;
      padding-left: 40px;
      padding-top: 1px;
      margin-right: -20px;  
    }
    .dropdown1:nth-child(2) {
      float: left;
      position: relative;
      list-style: none;
      top: 0px;
      right: 30px;
      padding-bottom: 200px;
      padding-left: 40px;
      padding-top: 1px;
      margin-right: -20px;  
    }

    .dropdown1:nth-child(3) {
      float: left;
      position: relative;
      list-style: none;
      top: 0px;
      right: 30px;
      padding-bottom: 200px;
      padding-left: 40px;
      padding-top: 1px;
      margin-right: -20px;  
    }
    .dropdown1:nth-child(4) {

      float: left;
      position: relative;
      list-style: none;
      top: 0px;
      right: 30px;
      padding-bottom: 63px;
      padding-left: 40px;
      padding-top: 1px;
      margin-right: -20px;  
    }
    .dropdown1:nth-child(5) {
      float: left;
      position: relative;
      list-style: none;
      top: 0px;
      right: 30px;
      left: 0px;
      padding-bottom: 100px;
      padding-left: 42px;
      padding-right: 20px;
      padding-top: 1px;

    }

    .dropdown1 a {
      position: relative;
      top: 10px;
      left: 0px;
      font-weight: bold;
      color: #888;
    }

    .dropdown1 a:hover { text-decoration: underline; color: #fff; }

    .dropdown1 a:nth-child(1) { color: #cbcbcb; }

    .dropdown1 ul {
      list-style: none;
      display: inline;
      position: relative;
      padding: 15px;
    }

    .dropdown1 ul li {
      position: relative;
      padding: 8px;
    bottom: 20px;
      right: 5px;
      font-size: 13.5px;
    }

    .dropdown1 ul li a { font-weight: normal; }

    /* WOMENS WEAR BUTTON */

    .womenswear { 
       width:158px !important;
       height: 42px;
       right: 2px;
       float:left;
       list-style: none;
       position: relative;
     }

     .womenswear ul {
      overflow:hidden;
      background: #000;
      opacity: 0.5px;

      width:1024px;
      height:300px;
      opacity: 0;
      position: relative;
      top:26px;
      visibility: hidden;
      z-index: 1;
      -webkit-transition: all .25s ease;
         -moz-transition: all .25s ease;
          -ms-transition: all .25s ease;
           -o-transition: all .25s ease;
              transition: all .25s ease;  
    }

    .womenswear:hover { background: #000; }

    .womenswear a {

      text-decoration: none;
      position: relative;
      top: 12px;
      font-weight: bold;
      color: #000;
      padding-top: 9px;
      padding-right: 15px;
      padding-bottom: 11px;
      padding-left: 14px;

    }

    .womenswear a:hover { color: #fff; }
    .womenswear:hover ul { visibility: visible; opacity: 0.9; }
    .womenswear li{ background: transparent; }

    .dropdown2:nth-child(1) {
      float: left;
      position: relative;
      list-style: none;
      top: 0px;
      right: 40px;
      padding-bottom: 96px;
      padding-left: 40px;
      padding-top: 1px;
      margin-right: -20px;  
    }
    .dropdown2:nth-child(2) {
      float: left;
      position: relative;
      list-style: none;
      top: 0px;
      right: 30px;
      padding-bottom: 200px;
      padding-left: 40px;
      padding-top: 1px;
      margin-right: -20px;  
    }

    .dropdown2:nth-child(3) {
      float: left;
      position: relative;
      list-style: none;
      top: 0px;
      right: 30px;
      padding-bottom: 200px;
      padding-left: 40px;
      padding-top: 1px;
      margin-right: -20px;  
    }
    .dropdown2:nth-child(4) {

      float: left;
      position: relative;
      list-style: none;
      top: 0px;
      right: 30px;
      padding-bottom: 63px;
      padding-left: 40px;
      padding-top: 1px;
      margin-right: -20px;  
    }
    .dropdown2:nth-child(5) {
      float: left;
      position: relative;
      list-style: none;
      top: 0px;
      right: 30px;
      left: 0px;
      padding-bottom: 100px;
      padding-left: 42px;
      padding-right: 20px;
      padding-top: 1px;

    }

    .dropdown2 a {
      position: relative;
      top: 10px;
      left: 0px;
      font-weight: bold;
    }

    .dropdown2 a:hover { text-decoration: underline; color: #fff; }
    .dropdown2 a:nth-child(1) { color: #cbcbcb; }

    .dropdown2 ul {
      list-style: none;
      display: inline;
      position: relative;
      padding: 15px;
    }

    .dropdown2 ul li {
      position: relative;
      padding: 8px;
    bottom: 20px;
      right: 5px;
      font-size: 13.5px;
    }

    .dropdown2 ul li a { font-weight: normal; }

1 个答案:

答案 0 :(得分：0)

要通过CSS规则集中HTML元素，您有两个选择：

margin: 0 auto 0 auto;关于元素本身。

或者：

text-align: center;在父元素上。

如果您的元素仍未居中：

检查：margin，padding，text-indent，position，top和 left:-20px;

或者，您可以使用JavaScript来计算位置。

相关问题
最新问题