小编Nic*_*ren的帖子

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

我有一个问题,因为我希望下拉菜单在顶层列表项上悬停的宽度相同.

但是,如果我将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>

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 …