CSS制作隱藏菜單是前端開發中經常用到的技巧之一。通過使用CSS的一些屬性和選擇器，可以實現鼠標懸停或點擊時顯示菜單，其他時間則隱藏菜單。

首先，我們需要先創建HTML代碼來定義菜單。以下是一個簡單的例子：

<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>

在CSS中，我們可以使用display屬性和visibility屬性來控制隱藏和顯示。以下是我們可以使用的一些CSS代碼：

nav ul {
display: none; /* 隱藏菜單 */
}
nav:hover ul {
display: block; /* 當鼠標懸浮在導航欄上時顯示菜單 */
}
nav ul li {
visibility:hidden; /* 占據空間，但不可見 */
}
nav:hover ul li {
visibility:visible; /* 當鼠標懸浮在導航欄上時顯示菜單 */
}

在上面的代碼中，當鼠標懸浮在導航欄上時，菜單將顯示出來。但是，當鼠標離開導航欄時，菜單將立即消失。為了避免這種情況，我們需要通過使用Javascript來控制菜單的顯示和隱藏狀態。以下是一個實例代碼：

var nav = document.querySelector('nav');
var navUl = nav.querySelector('ul');
nav.addEventListener('mouseenter', function() {
navUl.style.display = 'block';
});
nav.addEventListener('mouseleave', function() {
navUl.style.display = 'none';
});

在這段代碼中，我們使用了mouseenter和mouseleave事件來檢測鼠標是否進入或離開導航欄。當鼠標進入時，菜單將被顯示；當鼠標離開時，菜單將被隱藏。

總之，CSS制作隱藏菜單是一種常用的技巧，可以幫助我們創建干凈，簡潔的用戶界面。通過結合Javascript，我們可以完全控制菜單的行為，從而創造出靈活、易于使用的網站。