css下拉菜单下划线

CSS下拉菜单下划线是网页设计中经常使用的一种样式效果。实现这种效果需要使用一些CSS属性和选择器，下面我们来介绍一下详细的实现方法。

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  z-index: 1000;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  position: relative;
}

.dropdown-menu li a {
  display: block;
  padding: 10px;
}

.dropdown-menu li a:hover {
  background-color: #f5f5f5;
}

.dropdown-menu li a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.dropdown-menu li a:hover::before {
  transform: scaleX(1);
} 

首先，在HTML中需要定义一个下拉菜单，使用ul和li标签即可。在CSS中，给下拉菜单设置position: absolute和display: none属性，将其定位在父元素下方并隐藏起来。当鼠标悬停在父元素上时，设置dropdown:hover .dropdown-menu的display属性为block，显示下拉菜单。

接下来，为下拉菜单的每个选项设置position: relative属性，为此后的下划线做准备。然后设置每个选项的a标签的display为block，使其可以撑满整个选项框。当鼠标悬停在选项上时，为a标签设置背景颜色，实现hover效果。

最后，使用伪元素::before为下拉菜单中每个选项的a标签添加下划线效果。设置该元素的position: absolute、bottom: 0和left: 0属性，使它出现在每个选项文字下方。给它一个宽度为100%、高度为2px的背景色，即可实现下划线。在默认状态下，使用transform: scaleX(0)将它的宽度压缩为0，而在悬停时，使用transform: scaleX(1)将其宽度还原成100%，实现下划线出现的动画效果。