Tôi đang tạo trình đơn thả xuống, mục danh sách cấp cao nhất sẽ hiển thị tên người dùng.Thả xuống chiều rộng giống như cha mẹ
Tôi có một chút vấn đề vì tôi muốn trình đơn thả xuống có cùng chiều rộng ở mục danh sách cấp cao nhất được di chuột qua.
Tuy nhiên, nếu tôi đặt ul
li
ul
li
với chiều rộng 100%, phải mất 100% container tổng thể, chứ không phải của ul
trên nó. Tôi nghĩ vì ul
ul
là vị trí tuyệt đối?
Bất kỳ ý tưởng nào về cách tôi có thể làm cho trình đơn thả xuống có cùng chiều rộng với mục danh sách mẹ?
và đây là 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;
}