モバイルでエリアをクリックしたときにボトムナビゲーションの全幅を作る方法

Question

ボトムナビゲーションのホバーエリアをどのようにして全体領域に塗りつぶすかを調べようとしています。たとえば、ユーザーが電子メールを選択した場合、背景全体が黒で塗りつぶされます。添付されているように、アクセスすると選択可能な領域の左右にいくつかの領域があります。ここでhttps://codepen.io/nickfs000/pen/LePYqZ

screen animation of bottom navigation

を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。

認定セレクタを使用することになっています。この概念実証のものは、生産レベルのWebサイトで使用するにはあまりにも一般的です。
prefixを忘れないでください。