今天给大家分享的内容是一款使用纯CSS3制作的带下划线跟随效果的下拉菜单特效。该下拉菜单是通过CSS3 transform和transition来制作的。

简单教程：

HTML结构部分：该下拉菜单使用<nav>元素来包裹一个无序列表。

CSS样式部分：整个菜单ul #main的定位方式采用相对定位方式。display显示为内联块级元素。菜单项通过padding来设置尺寸，并设置最小宽度min-width为120像素。

在HTML结构中，ul .drop是下拉菜单组件。它的定位方式采用绝对定位。它里面的div元素使用translate函数在Y轴上移动-100%，使它隐藏起来（.drop上使用了overflow:hidden）。

#mark是下划线元素。它也使用绝对定位。并为所有动画设置了0.35秒的动画过渡效果。

当鼠标滑过菜单项#main li元素的时候，根据nth—child来判断当前鼠标滑过哪个菜单项。将该菜单项中的子菜单的Y轴位置恢复为0，显示下拉菜单，同时根据不同的菜单项来设置translate函数的X方向移动值来移动下划线。

今天分享的内容就到这里了，更多内容敬请期待！