將下拉菜單定位到中心時出現問題

Question

我是HTML/CSS的新手，仍在學習，但現在我被卡住了。

我試圖使用right標籤中.womenswear ul使下拉菜單移到中央，但是當我嘗試使用right標籤下拉菜單沒有任何反應定位的下降。

這是怎麼看起來像現在：

你可以看到下拉菜單上rightside遷出。

這就是我想要達到的目標：

下面是代碼：

HTML代碼：

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

Answer 1

要通過CSS規則集中HTML元素，您有兩種選擇：

margin: 0 auto 0 auto;關於元素本身。

或者：

父元素上text-align: center;。

如果你的元素則仍然不居中：

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

或者，您可以使用JavaScript來計算設置位置。