Drop down width same as parent - css

Question

I'm creating a drop down menu, the top level list item will display a username.
I have a bit of an issue because I want the dropdown menu to be the same width at the top level list item being hovered over.
However, if I set ul li ul li to width 100%, it takes 100% of the overall container, not of the ul above it. I think because ul ul's are position absolute?
Any ideas how I can make the drop down menu's the same width as the parent list item?
The page can be seen here.
and here's the HTML
<ul>
<li><span aria-hidden="true" data-icon="a"> A long name here
<ul>
<li>View Profile</li>
<li>Edit Profile</li>
<li>Settings</li>
<li>My Payments</li>
</ul>
</li>
<li> <span aria-hidden="true" data-icon="c"> Online</li>
<li> Log Out</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;
}

Answer 1

Here's how I made it look like this:
Just modify these rules:
.head-link ul li {
position: relative;
... /* Keep all current rules */
}
.head-link ul li ul {
width: 100%;
... /* Keep all current rules */
}