在网页设计中，导航栏是非常重要的组成部分，它可以帮助用户快速找到自己需要的信息，而导航特效则可以提高页面的交互性和美观度。下面我们就来学习一下如何使用CSS设置导航特效。 首先，我们需要在HTML中创建导航栏的代码结构。这里我们以一个水平导航栏为例：

<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务项目</a></li>
<li><a href="#">客户案例</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>

接着，我们使用CSS来设置导航特效。首先，我们定义导航栏的基本样式：

nav {
background-color: #333;
height: 50px;
line-height: 50px; /* 使文字垂直居中 */
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex; /* 将菜单项横向排列 */
}
nav li {
margin: 0 10px;
}
nav a {
display: block;
color: #fff;
text-decoration: none;
padding: 0 10px;
}

然后，我们来设置鼠标悬停时的特效：

nav a:hover {
background-color: #fff;
color: #333;
}

这样，当鼠标悬停在导航栏上时，菜单项的背景色会变成白色，文字变成黑色。 接着，我们来设置当前选中的菜单项特效：

nav li.current a {
background-color: #fff;
color: #333;
}

这里我们假设当前选中的菜单项有一个名为"current"的类，我们可以通过JavaScript或后端代码来动态地添加这个类。当当前菜单项被选中时，它的背景色和文字颜色会改变。 最后，我们来给菜单项添加过渡动画效果：

nav a {
transition: background-color 0.3s, color 0.3s;
}

这里我们使用CSS的"transition"属性来定义菜单项改变颜色时的过渡时间和动画效果。 通过以上 CSS 的设置，我们可以轻松地为导航栏增加交互性和美观度。