Déroulant largeur même en tant que parent

Je suis de la création d'un menu déroulant, le haut niveau de l'élément de liste affiche un nom d'utilisateur.

J'ai un petit problème car je veux que le menu déroulant pour être de la même largeur au plus haut niveau de l'élément de liste étant planait au-dessus.

Cependant, si j'ai mis ul li ul li de largeur 100%, il faut 100% de l'ensemble du conteneur, pas de la ul au-dessus d'elle. Je pense que parce que ul uls'sont en position absolute?

Toutes les idées de comment je peux faire le menu déroulant de la même largeur que le parent de l'élément de liste?

La page peut être vu ici.

et voici le code 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;
}