Проблемы с позиционированием выпадающего меню в центр

Я новичок в HTML/CSS и все еще учась, однако прямо сейчас я застрял.Проблемы с позиционированием выпадающего меню в центр

Я пытался использовать right тег в .womenswear ul сделать выпадающее меню двигаться к центру, но когда я пытаюсь использовать right тег для позиционирования выпадающего меню ничего не происходит.

Вот как это выглядит сейчас:

enter image description here

Вы можете увидеть, что выпадающее меню съезжает на RightSide.

Это то, что я хочу добиться:

enter image description here

Вот код:

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

источник

2014-02-27 Nohman

Маленький совет: '.womenswear ul' будет применяться ко всем элементам' ul' внутри этого класса, вы должны быть более конкретными, если хотите выровнять эти элементы, как это, дать этим спискам имя класса – Maksim

Чтобы центрировать элемент HTML с помощью правил CSS, у вас есть два варианта:

margin: 0 auto 0 auto; на самом элементе.

Или:

text-align: center; на родительском-элемента.

Если элемент тогда еще не по центру:

Проверил: margin, padding, text-indent, position, top и left:-20px;.

В качестве альтернативы вы можете использовать JavaScript, чтобы установить позиции в вычислительном режиме.

источник

2014-02-28 00:24:37

Проблемы с позиционированием выпадающего меню в центр

ответ

Смежные вопросы