各ナビゲーション項目の中央揃えドロップダウンメニュー

Question

特定のサイズ、幅800px、高さ50pxのdivを持っています。内側には6個の要素の順序付けられていないリストがあり、これはdivの中心に揃えられています。

次に、各要素からドロップダウンリストを作成します。今はコンテナの左側にの2番目の列が並んでいますdiv。

私はそれを各要素の中心に揃えようとしており、ul要素は同じ幅にすることはできません。これまで私がこれまで持っていたものは、jsFiddleです。助言がありますか？

#bar { 
 
    width: 800px; 
 
    left: 50%; 
 
    transform: translate(-50%); 
 
    -webkit-transform: translate(-50%); 
 
    height: 50px; 
 
    background-color: lime; 
 
    position: absolute; 
 
    top: 20px; 
 
} 
 
.test-navbar ul { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    list-style: none; 
 
    background-color: ; 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
} 
 
.test-navbar li { 
 
    display: inline-block; 
 
    width: auto; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.test-navbar a { 
 
    text-align: center; 
 
    padding: 9px; 
 
    margin: 0; 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #313131; 
 
    font-family: 'Oswald', sans-serif; 
 
    margin-top: 0px; 
 
    font-size: 23px; 
 
    background-color: ; 
 
} 
 
.test-navbar a:hover { 
 
    color: #f50057; 
 
} 
 
.test-navbar ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    left: 0%; 
 
    background: #fff; 
 
    margin-left: 0px; 
 
    text-align: center; 
 
    width: 200px; 
 
    line-height: 40px; 
 
    padding: 10px; 
 
} 
 
.test-navbar ul ul li { 
 
    float: none; 
 
    width: 100%; 
 
    background-color: ; 
 
} 
 
.test-navbar ul ul a { 
 
    line-height: 0px; 
 
    padding: 5px 5px; 
 
    width: 100%; 
 
    background-color: ; 
 
} 
 
.test-navbar ul li:hover > ul { 
 
    display: block; 
 
}

<div id="bar"> 
 
    <div class="test-navbar"> 
 
    <ul> 
 
     <li> 
 
     <a href="#">PASION</a> 
 
     <ul> 
 
      <li><a href="">EXTRA FROM PASION1</a></li> 
 
      <li><a href="">EXTRA FROM PASION2</a></li> 
 
      <li><a href="">EXTRA FROM PASION3</a></li> 
 
      <li><a href="">EXTRA FROM PASION4</a></li> 
 
      <li><a href="">EXTRA FROM PASION5</a></li> 
 
      <li><a href="">EXTRA FROM PASION6</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">EXTRA AREA</a></li> 
 
     <li><a href="#">VIDEO</a></li> 
 
     <li> 
 
     <a href="#">ANOTHER LINK</a> 
 
     <ul> 
 
      <li><a href="">EXTRA FROM PASION1</a></li> 
 
      <li><a href="">EXTRA FROM PASION2</a></li> 
 
      <li><a href="">EXTRA FROM PASION3</a></li> 
 
      <li><a href="">EXTRA FROM PASION4</a></li> 
 
      <li><a href="">EXTRA FROM PASION5</a></li> 
 
      <li><a href="">EXTRA FROM PASION6</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">LINK5 STYLE</a></li> 
 
     <li><a href="#">BYE</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

あなたは変換トリックで、相対+絶対位置を使用することができました。この

をお試しください。大丈夫@Paulie_D

.test-navbar li { 
    position: relative; 
} 
.test-navbar ul ul { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
} 

jsFiddle

Answer 2

私はあなたの質問で少し混乱していますが、私はあなたが以下のような効果を達成しようとしていると信じて：あなたはこのチュートリアルに従うことを行うにはhttp://demos.inspirationalpixels.com/dropdown-with-html-css-demo/

を：http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css

JSフィドルです：https://jsfiddle.net/8apu5yp6/

HTML：

<div class="menu-wrap"> 
    <nav class="menu"> 
     <ul class="clearfix"> 
      <li><a href="#">Home</a></li> 
      <li> 
       <a href="#">Movies <span class="arrow">&#9660;</span></a> 

       <ul class="sub-menu"> 
        <li><a href="#">In Cinemas Now</a></li> 
        <li><a href="#">Coming Soon</a></li> 
        <li><a href="#">On DVD/Blu-ray</a></li> 
        <li><a href="#">Showtimes &amp; Tickets</a></li> 
       </ul> 
      </li> 
      <li><a href="#">T.V. Shows</a></li> 
      <li class="current-item"><a href="#">Photos</a></li> 
      <li><a href="#">Site Help</a></li> 
     </ul> 
    </nav> 
</div> 

CSS：

body { 
    background:#bf5c71 url('body-bg.jpg'); 
} 

.clearfix:after { 
    display:block; 
    clear:both; 
} 

/*----- Menu Outline -----*/ 
.menu-wrap { 
    width:100%; 
    box-shadow:0px 1px 3px rgba(0,0,0,0.2); 
    background:#3e3436; 
} 

.menu { 
    width:1000px; 
    margin:0px auto; 
} 

.menu li { 
    margin:0px; 
    list-style:none; 
    font-family:'Ek Mukta'; 
} 

.menu a { 
    transition:all linear 0.15s; 
    color:#919191; 
} 

.menu li:hover > a, .menu .current-item > a { 
    text-decoration:none; 
    color:#be5b70; 
} 

.menu .arrow { 
    font-size:11px; 
    line-height:0%; 
} 

/*----- Top Level -----*/ 
.menu > ul > li { 
    float:left; 
    display:inline-block; 
    position:relative; 
    font-size:19px; 
} 

.menu > ul > li > a { 
    padding:10px 40px; 
    display:inline-block; 
    text-shadow:0px 1px 0px rgba(0,0,0,0.4); 
} 

.menu > ul > li:hover > a, .menu > ul > .current-item > a { 
    background:#2e2728; 
} 

/*----- Bottom Level -----*/ 
.menu li:hover .sub-menu { 
    z-index:1; 
    opacity:1; 
} 

.sub-menu { 
    width:160%; 
    padding:5px 0px; 
    position:absolute; 
    top:100%; 
    left:0px; 
    z-index:-1; 
    opacity:0; 
    transition:opacity linear 0.15s; 
    box-shadow:0px 2px 3px rgba(0,0,0,0.2); 
    background:#2e2728; 
} 

.sub-menu li { 
    display:block; 
    font-size:16px; 
} 

.sub-menu li a { 
    padding:10px 30px; 
    display:block; 
} 

.sub-menu li a:hover, .sub-menu .current-item a { 
    background:#3e3436; 
} 

Answer 3

/* NAV BAR */ 

.test-navbar { 
    background-color: #333; 
    margin-bottom: 2px; 
    height: 40px; 
    color: white; 
    border-radius: 10px; 
} 

.test-navbar ul { 
    list-style: none; 
    overflow: hidden; 

} 

.test-navbar ul li { 
    float: left; 
    border-right: 2px solid #dede0e; 
    font-size: 1.5em; 

} 
.test-navbar ul li a { 
    color: white; 
    display: block; 
    text-decoration: none; 
    padding: 6px 10px; 

} 
.test-navbar ul li:hover { 
    background-color: #000000; 

} 

/* DROP DOWN MENU */ 

.test-navbar ul ul { 
    display: none; 
    list-style: none; 
    color: blueviolet; 
    background: #a80000; 
    position: absolute; 

} 
.test-navbar ul ul li { 
    float: none; 
    font-size: 1em; 
    border: none; 
    position: relative; 
    top: 100%; 
    left: 0; 
    border-top:3px solid white; 
} 
.test-navbar ul ul li a { 
    border-right: none; 
    padding: 0 20px; 
} 
.test-navbar ul li:hover > ul 
{ 
    display: block; 
} 

それは私のデモからnevbar