大略教程：

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

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

jsp页下拉菜单css样式纯CSS3制造的下划线下拉菜单特效 Bootstrap

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

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

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

本日禀享的内容就到这里了，更多内容敬请期待！