css导航栏鼠标显示下划线

CSS导航栏是一个网站的重要组成部分，它能使用户方便地浏览网站，从而提高用户体验。为了使导航栏更加直观，我们可以使用CSS来实现鼠标悬停时显示下划线的效果。

nav a:hover{
  text-decoration: underline;
}

上述代码中，我们使用了:hover伪类来表示当鼠标悬停在导航栏上时，对应的链接出现下划线。text-decoration属性用来定义文本修饰样式，其中underline表示下划线。

除了下划线，我们还可以使用其他文本修饰样式，比如删除线、加粗、斜体等等。下面是一些示例代码：

//删除线
nav a:hover{
  text-decoration: line-through;
}

//加粗
nav a:hover{
  font-weight: bold;
}

//斜体
nav a:hover{
  font-style: italic;
}

在使用CSS导航栏时，我们还需要注意一些细节。比如，当导航栏链接有多行文本时，下划线的位置就会出现问题。我们可以使用padding或者line-height属性来解决这个问题。另外，当导航栏链接出现在多个页面时，我们需要为当前页面的链接添加特殊样式，以便用户能够更快地定位。

总之，通过CSS导航栏鼠标显示下划线的效果，可以让网站更加美观、易用。我们需要根据网站的需求和用户习惯来灵活运用这一技巧，以达到最佳效果。