부모와 동일한 너비로 내림

Question

드롭 다운 메뉴를 만들면 최상위 목록 항목에 사용자 이름이 표시됩니다.

드롭 다운 메뉴를 마우스로 가리키고있는 최상위 목록 항목의 너비가 같기 때문에 약간 문제가 있습니다.

그러나, 100 % 대 폭 ulliulli 설정하면, 그 위에하지 ul의 전체적인 컨테이너의 100 %가 걸린다. ulul 님이 절대 포지션이라고 생각합니까?

드롭 다운 메뉴를 부모 목록 항목과 동일한 너비로 만들 수있는 아이디어가 있으십니까?

The page can be seen here.

여기에는 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

다음

나는 그것을 다음과 같이 만든 방법은 다음과 같습니다

다음 규칙을 수정하십시오.

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