CSS中打開導航是Web開發中常見的操作之一。通過使用一些簡單的CSS代碼，我們可以實現打開和關閉導航的效果，讓網站的界面更加美觀和用戶友好。

/* 定義導航的基本樣式 */
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #000;
z-index: 99;
}
/* 定義導航中菜單的樣式 */
nav ul {
list-style: none;
float: right;
margin-right: 20px;
}
nav ul li {
float: left;
margin-left: 20px;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
}
/* 定義點擊導航按鈕后出現的菜單 */
nav ul li ul {
display: none;
}
nav ul li:hover ul {
display: block;
position: absolute;
top: 60px;
left: 0;
width: 200px;
background: #000;
}
nav ul li:hover ul li {
float: none;
margin: 0;
}
nav ul li:hover ul li a {
padding: 10px;
border-bottom: 1px solid #666;
}

首先，我們需要定義導航的基本樣式，包括固定在頁面頂部、寬度為100%、高度為60px、背景為黑色、層級為99等樣式。然后，我們定義導航中菜單的樣式，包括無序列表、菜單項浮動、菜單項之間有20px的左邊距、菜單項中鏈接有15px上下的內邊距等樣式。

接下來，我們定義點擊導航按鈕后出現的菜單。通過將子菜單的display屬性設置為none，我們可以實現子菜單一開始不顯示。當用戶鼠標移動到包含子菜單的菜單項上時，我們將子菜單的display屬性設置為block，并將其定位到父菜單下面。我們還需要定義子菜單的寬度為200px、背景為黑色、子菜單中的菜單項之間有1px的下邊框、以及菜單項中鏈接有10px上下的內邊距等樣式。

最后，在HTML文件中添加導航菜單的代碼，并為包含子菜單的菜單項添加:hover事件，使得當鼠標在該菜單項上懸停時，子菜單顯示出來。