CSS菜單切換視頻是在網頁中提供多個視頻的選擇，并通過菜單來控制視頻的切換。

HTML結構：
<div class="menu">
<ul>
<li class="active"><a href="#" data-video="video1">視頻1</a></li>
<li><a href="#" data-video="video2">視頻2</a></li>
<li><a href="#" data-video="video3">視頻3</a></li>
</ul>
</div>
<div class="videos">
<div class="video active video1">
<video src="video1.mp4" controls></video>
</div>
<div class="video video2">
<video src="video2.mp4" controls></video>
</div>
<div class="video video3">
<video src="video3.mp4" controls></video>
</div>
</div>
CSS樣式：
.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
display: inline-block;
margin: 0;
padding: 10px;
background-color: #eee;
cursor: pointer;
}
.menu li.active {
background-color: #ccc;
}
.videos .video {
display: none;
}
.videos .video.active {
display: block;
}
JS代碼：
const menuItems = document.querySelectorAll('.menu li');
const videos = document.querySelectorAll('.videos .video');
menuItems.forEach(menuItem =>{
menuItem.addEventListener('click', event =>{
event.preventDefault();
// 切換菜單狀態
menuItems.forEach(item =>{
item.classList.remove('active');
});
menuItem.classList.add('active');
// 切換視頻顯示
videos.forEach(video =>{
video.classList.remove('active');
});
const videoItem = document.querySelector(`.videos .${menuItem.firstChild.getAttribute('data-video')}`);
videoItem.classList.add('active');
videoItem.firstChild.play();
});
});

通過以上代碼，我們可以實現菜單切換視頻的效果。具體實現方法是使用HTML結構來定義菜單和視頻容器，并通過CSS樣式來隱藏和控制視頻的顯示。JS代碼則監聽菜單的點擊事件，并通過修改CSS樣式來實現視頻的切換。