CSS3技術給我們帶來了許多強大的效果，其中之一就是懸停導航。

懸停導航是指當鼠標指針懸停在導航欄上時，導航欄的樣式會有所變化，以便讓用戶知道他們當前所處的菜單選項。下面是一個使用CSS3實現懸停導航的示例：

<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">關于我們</a></li>
</ul>
<style>
ul {
list-style: none;
display: flex;
}
li {
margin-right: 20px;
}
a {
text-decoration: none;
color: #333;
font-weight: bold;
padding-bottom: 10px;
border-bottom: 3px solid transparent;
transition: border-bottom-color 0.3s ease-in-out;
}
a:hover {
border-bottom-color: #e67e22;
}
</style>

在這個示例中，我們使用flexbox布局來排列導航欄中的li元素，并使用CSS3的transition和:hover效果來為a元素添加懸停效果。當鼠標指針懸停在a元素上時，底部邊框的顏色會從透明變為橙色，以便用戶知道他們當前所處的菜單選項。

使用CSS3懸停導航可以為網站帶來更好的用戶體驗，并提高網站的可用性和留存率。如果你正在設計一個新的網站，不妨考慮一下使用這個強大的效果。