Tworzę rozwijane menu, pozycja na najwyższym poziomie wyświetla nazwę użytkownika.Zmniejsz szerokość tak samo jak nadrzędny
Mam problem, ponieważ chcę, aby menu rozwijane miało taką samą szerokość na przewróconym elemencie listy najwyższego poziomu.
Jeśli jednak ustawić ul
li
ul
li
do szerokości 100%, to ma 100% całego pojemnika, a nie na ul
powyżej. Myślę, że ponieważ ul
ul
są absolutne pozycji?
Jakieś pomysły, w jaki sposób mogę spowodować, że rozwijane menu będzie miało taką samą szerokość jak element listy nadrzędnej?
i oto 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;
}