Css 下拉宽度与父项相同

我正在创建一个下拉菜单，顶级列表项将显示一个用户名

我有一点问题，因为我希望下拉菜单与悬停在上面的顶级列表项的宽度相同

但是，如果我将

ul

li

ul

li

设置为100%宽度，它将占用整个容器的100%，而不是其上方的

ul

。我想是因为

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>

---

我是这样做的：

只需修改这些规则：

.head-link ul li {
    position: relative;
    ... /* Keep all current rules */
}
.head-link ul li ul {
    width: 100%;
    ... /* Keep all current rules */
}

.head-link ul li {
    position: relative;
    ... /* Keep all current rules */
}
.head-link ul li ul {
    width: 100%;
    ... /* Keep all current rules */
}