CSS導航欄是設計一個漂亮網站必不可少的一部分，其中跟隨鼠標的特效可以為網站增添一份動感和互動性。以下是一份實現跟隨鼠標css導航的代碼：

<nav class="nav-bar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
<span class="highlight"></span>
</nav>
<style>
.nav-bar {
display: flex;
justify-content: center;
align-items: center;
background-color: #174887;
padding: 10px;
position: relative;
}
.nav-bar ul {
list-style: none;
display: flex;
justify-content: space-between;
width: 400px;
}
.nav-bar li a {
color: #fff;
text-decoration: none;
font-size: 18px;
padding: 10px 20px;
position: relative;
}
.highlight {
position: absolute;
width: 80px;
height: 3px;
background-color: #fff;
bottom: -10px;
border-radius: 10px;
transition: all 0.3s ease-in-out;
}
.nav-bar li a:hover~.highlight {
width: 100%;
transform: translateX(-10%);
}
</style>

在這個代碼中，我們通過使用CSS的偽類選擇器:hover和相鄰兄弟選擇器~來實現了當鼠標懸停在導航欄的某一項上時，下劃線會跟隨鼠標移動的效果。 通過更改樣式，我們可以使得下劃線的動畫更加流暢或者更改下劃線的顏色與寬度等等。