모바일에서 영역을 클릭 할 때 하단 탐색 네비게이션 전체를 만드는 방법

Question

아래쪽 네비게이션의 마우스 오버 영역을 전체 영역에 채우는 방법을 파악하려고합니다. 예를 들어 사용자가 이메일을 선택하면 전체 배경이 검은 색으로 채워 져야합니다. 첨부 파일에서 볼 수 있듯이 액세스 할 때 선택 가능한 영역의 왼쪽과 오른쪽에 일부 영역이 있습니다.

방문은 여기

screen animation of bottom navigation

https://codepen.io/nickfs000/pen/LePYqZ을 codepen 내 HTML 코드의 모양과 그것을 알아낼 수있는 도움을 주셔서 감사 할 것입니다. 아마 버튼을 만들 필요가 있을까요?

<div class="bottom-menu-view"> 
    <ul> 
     <li><a href="mailto:flipfundnm@gmail.com">email</a></li> 
     <li><a href="tel:+1-505-369-2833">Call</a></li> 
    </ul> 
</div> 


@media (max-width: 767px){ 
ul { 
    text-align: center; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #045387; 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    font-size: 0.65rem !important; 

} 

li { 
    display: inline-block; 

} 

li a { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 8px 60px; 
text-decoration: none; 
font-size: 0.65rem; 
} 

li a:hover:not(.active) { 
background-color: #111; 
} 

.active { 
    background-color: #4CAF50; 
} 
} 

Answer 1

여기에 내가 원하는처럼 작동하도록 펜에 추가 된 내용은 다음과 같습니다

@media (max-width: 767px){ 
    ul { 
    display: flex; 
    } 
    ul li { 
    flex: 1; 
    display: block; 
    } 
    li a { 
    display: block; 
    } 
} 

Updated pen.

자격있는 선택자를 사용해야합니다. 이 proof-of-concept의 것들은 생산 수준의 웹 사이트에서 사용하기에는 너무 일반적입니다.
prefix을 잊지 마세요.