CSS3懸停滑動導航欄是一種給網站增加交互性的好方法。當用戶把鼠標懸停在導航欄的選項上時，會出現下劃線，并且帶有一個流暢的滑動效果。下面是實現這種效果的代碼：

nav {
display: flex;
justify-content: center;
align-items: center;
}
nav a {
position: relative;
margin: 0 20px;
padding-bottom: 5px;
text-decoration: none;
color: #000;
}
nav a::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #000;
transform: scaleX(0);
transition: transform 0.3s ease;
}
nav a:hover::before {
transform: scaleX(1);
}

首先，我們把導航欄的元素設置為flex布局，讓選項在水平方向上居中對齊。然后我們為每個選項設置position:relative，以便我們可以給它們的下面添加一個偽元素。偽元素設置position:absolute，這樣它就會相對于選項的底部位置。我們把偽元素的高度設置為2px，并且給它設置了背景顏色。

偽元素開始的時候是0%的寬度，當鼠標懸停在選項上時，它的scaleX將變為1，偽元素就會把選項覆蓋，形成一條下劃線，并且用transition屬性帶動畫過渡效果。

這種懸停滑動導航欄是非常容易實現的，只需幾行代碼就可以實現。同時，它也可以使您的網站看起來更加現代和吸引人。使用CSS3創建動畫和效果可以使您的網站更具交互性，這將幫助您與用戶之間的溝通更加有效。