CSS 導航展開收縮可以讓網站更加美觀和實用。在頁面上放置一個導航欄可以讓網站的用戶更方便快速地找到他們需要尋找的內容。使用 CSS 導航展開收縮可以大大節省頁面的空間，同時也可以增加網站的專業程度。

為了實現這個效果，我們需要使用 HTML、CSS 和 JavaScript 三個技術。首先在 HTML 中創建一個導航欄的骨架，然后用 CSS 來美化它們。最后使用 JavaScript 編寫相關的代碼將其展開和收縮。

<nav class="navbar">
<h3 class="logo">My Website</h3>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Products</a>
<div class="dropdown-content">
<a href="#">Product 1</a>
<a href="#">Product 2</a>
<a href="#">Product 3</a>
</div>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>

使用 CSS 來美化導航欄的外觀，它可以讓導航欄更易于使用。這里設置了所有 HTML 元素的 margin、padding、text-decoration 和 background-color 等屬性，并將它們居中顯示：

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
background-color: #333;
color: #fff;
padding: 0 50px;
}
.logo {
font-size: 25px;
letter-spacing: 2px;
}
.menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 0 10px;
}
a {
color: #fff;
text-decoration: none;
}
.dropdown {
position: relative;
}
.dropdown .dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #f9f9f9;
}
.dropdown:hover .dropdown-content {
display: block;
}

最后，我們需要使用 JavaScript 來實現導航欄的展開和收縮。這里使用 jQuery 來完成這項任務：

$(document).ready(function() {
$('.menu-icon').click(function() {
$('.menu').slideToggle();
})
})

以上是 CSS 導航展開收縮的相關知識，通過學習可以讓我們掌握一種新的 Web 設計技巧。