Larghezza di discesa uguale a quella del genitore

Question

Sto creando un menu a discesa, la voce di elenco di livello superiore mostrerà un nome utente.

Ho un po 'di problemi perché voglio che il menu a discesa abbia la stessa larghezza dell'elemento di elenco di livello superiore al passaggio del mouse.

Tuttavia, se regolo ulliulli alla larghezza 100%, ci vuole il 100% del contenitore generale, non del ul sopra di esso. Penso che perché ulul sono assoluti?

Qualche idea su come sia possibile impostare il menu a discesa con la stessa larghezza dell'elemento della lista padre?

The page can be seen here.

ed ecco il codice 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; 
} 

Answer 1

Ecco come ho fatto apparire come questo:

Basta modificare queste regole:

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