5
私はドロップダウンメニューを作成しています。トップレベルのリスト項目にはユーザー名が表示されます。親と同じ幅をドロップ
トップレベルのリストアイテムでドロップダウンメニューを同じ幅にしたいので、少し問題があります。
しかし、私は100%の幅に対するul
ul
li
li
を設定した場合、それはない、それ以上のul
の、全体的な容器の100%を取ります。 ul
ul
さんは絶対的な位置だと思いますか?
ドロップダウンメニューを親リストアイテムと同じ幅にする方法はありますか?
、ここでHTML
<ul>
<li><a href="#"><span aria-hidden="true" data-icon="a"> A long name here</a>
<ul>
<li><a href="#">View Profile</a></li>
<li><a href="#">Edit Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">My Payments</a></li>
</ul>
</li>
<li><a href=""> <span aria-hidden="true" data-icon="c"> Online</a></li>
<li><a href="#"> Log Out</a></li>
</ul>
CSS
.head-link ul ul {
display: none;
}
.head-link ul li:hover > ul {
display: block;
}
.head-link ul {
list-style: none;
position: relative;
display: inline-table;
}
.head-link ul li {
float: left;
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
height: 2em;
width: auto;
padding: 0.5em 0.98em;
}
.head-link ul li:hover {
background: #ffffff;
}
.head-link ul li:hover a {
color: #434343;
border-bottom: none;
}
.head-link ul li a {
display: block;
color: #ffffff;
text-decoration: none;
}
.head-link ul ul {
background: #ffffff;
border-radius: 0px;
padding: 0;
position: absolute;
top: 99%;
left: 0;
text-align: left;
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
padding-bottom: 0.8em;
padding-top: 0.5em;
box-shadow: 0px 0.3em 0.4em rgba(0,0,0,0.3);
}
.head-link ul ul li {
float: none;
position: relative;
padding: 0em;
}
.head-link ul ul li a {
padding: 0.5em 1.24em;
color: #434343;
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
}
.head-link ul ul li a:hover {
background: #ffffff;
text-decoration: underline;
}
.head-link ul ul ul {
position: absolute;
left: 100%;
top:0;
}