CSS蒙版遮住菜單可以讓網站的菜單欄更加美觀，同時也可以增加網站的信息層次感。下面就為大家展示一個關于CSS蒙版遮住菜單的實現案例。

.menu {
position: relative; /* 相對定位 */
 }
.mask {
position: absolute; /* 絕對定位 */
top: 100%; /* 設置遮罩層距離頂部位置 */
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7); /* 設置背景色，即蒙版顏色 */
visibility: hidden; /* 默認隱藏 */
opacity: 0; /* 默認透明度為0 */
transition: all 0.3s ease; /* 過渡效果 */
 }
.menu:hover .mask {
visibility: visible; /* 鼠標經過時，顯示遮罩層*/
opacity: 1;
top: 0;
 }

這里我們首先為菜單欄添加一個相對定位的class，接著添加一個絕對定位的遮罩層，初始時遮罩層是不可見的，通過設置透明度為0和visibility屬性為hidden來實現。當鼠標經過菜單欄時，設置遮罩層的visibility屬性為visible，opacity屬性為1，同時將頂部位置設置為0來實現一個漸變顯示效果。

通過這個CSS蒙版遮住菜單案例，我們可以非常簡單明了地實現這一功能，增強網站的視覺效果與信息層次感。