Aşağı açılır genişlikle aynı üst

Question

Bir açılır menü oluşturuyorum, en üst düzey liste öğesi bir kullanıcı adı görüntüler.

Bir sorunum var çünkü açılan menünün üst üste gelen liste öğesinin aynı genişlikte olmasını istiyorum.

Ancak,% 100 genişlik ulliulli getirildiği zaman değil yukarıda ul arasında, genel olarak, kabın% 100 alır. Sanırım ulul 'un konumu mutlak?

Açılır menü, ana liste öğesiyle aynı genişlikte nasıl oluşturabilirim?

The page can be seen here.

ve burada HTML var

<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

İşte

bunun böyle görünmesine neden böyle:

Yalnızca şu kuralları değiştirin:

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