特定のサイズ、幅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>
ありがとう@Panglossそれは動作します!私はあなたがそれをよりよく理解したことを勉強するつもりです、ありがとう! – Eugenio