CSS 點擊展開導航是一種非常實用的網頁設計技巧。當網頁上的導航欄過于龐大，需要在小屏幕上顯示時，這種技巧可以最大化地利用可用的空間，并且可以讓用戶更容易地找到所需要的信息。

實現這種功能的方法就是使用 CSS 組合選擇器來選中導航元素，并通過添加 :hover、:active 或 :focus 偽類來應用不同的樣式。下面是一個簡單的例子：

nav ul {
display: none;
}
nav li:hover ul {
display: block;
}

上面的代碼會隱藏導航欄下的所有子元素（ul），然后在子菜單父元素（li）上添加 :hover 偽類，當用戶將鼠標懸停在菜單上時，子元素就會顯示出來。

當然，這只是最基本的實現方式。如果顏色、字體、背景等方面需要進行改變，可以添加更多的樣式規則來實現。以下是一些常用的樣式規則：

nav {
background-color: #333;
padding: 10px;
margin-bottom: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin: 0;
padding: 0;
}
nav ul a {
color: white;
display: block;
padding: 10px;
text-decoration: none;
}
nav ul li:hover a {
background-color: #555;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
nav ul ul li {
display: block;
}
nav ul ul a {
background-color: #555;
color: white;
padding: 10px;
width: 200px;
}

以上的樣式規則包括了導航欄的背景、鏈接文字顏色、懸停時的背景色、子菜單的位置和顏色等方面。根據實際需求，可以對其中的屬性進行調整。

總之，CSS 點擊展開導航是一個十分實用和靈活的網頁設計技巧。嘗試使用上面的代碼和樣式規則，來為你的網頁加入一個美觀、好用的導航欄吧！