css下拉菜单出现下划线,纯CSS3下划线跟随效果下拉菜单导航条

元素来包裹一个无序列表。主页

关于我们

项目分类scss

jquery

html

联系我们CSS样式整个菜单ul#mian的定位方式采用相对定位方式。display显示为内联块级元素。菜单项通过padding来设置尺寸，并设置最小宽度min-width为120像素。#main { position: relative; list-style: none; background: #6BBE92; font-weight: 400; font-size: 0; text-transform: uppercase; display: inline-block; padding: 0; margin: 50px auto;}#main li { font-size: 0.8rem; display: inline-block; position: relative; padding: 15px 20px; cursor: pointer; z-index: 5; min-width: 120px;}li { margin: 0;}在HTML结构中，ul.drop是下拉菜单组件。它的定位方式采用绝对定位。它里面的div元素使用translate函数在Y轴上移动-100%，使它隐藏起来(.drop上使用了overflow:hidden)。.drop { overflow: hidden; list-style: none; position: absolute; padding: 0; width: 100%; left: 0; top: 48px;}.drop div { -webkit-transform: translate(0, -100%); -moz-transform: translate(0, -100%); -ms-transform: translate(0, -100%); transform: translate(0, -100%); -webkit-transition: all 0.5s 0.1s; -moz-transition: all 0.5s 0.1s; -ms-transition: all 0.5s 0.1s; transition: all 0.5s 0.1s; position: relative;}.drop li { display: block; padding: 0; width: 100%; background: #3E8760 !important;}#marker是下划线元素。它也使用绝对定位。并为所有动画设置了0.35秒的动画过渡效果。#marker { height: 6px; background: #3E8760 !important; position: absolute; bottom: 0; width: 120px; z-index: 2; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; -ms-transition: all 0.35s; transition: all 0.35s;}在鼠标滑过菜单项#main li元素时，根据nth-child来判断当前鼠标滑过哪个菜单项。然后将该菜单项中的子菜单的Y轴位置恢复为0，显示下拉菜单，同时根据不同的菜单项来设置translate函数的X方向移动值来移动下划线。#main li:nth-child(1):hover ul div { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0);}#main li:nth-child(1):hover ~ #marker { -webkit-transform: translate(0px, 0); -moz-transform: translate(0px, 0); -ms-transform: translate(0px, 0); transform: translate(0px, 0);} #main li:nth-child(2):hover ul div { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0);}#main li:nth-child(2):hover ~ #marker { -webkit-transform: translate(120px, 0); -moz-transform: translate(120px, 0); -ms-transform: translate(120px, 0); transform: translate(120px, 0);} #main li:nth-child(3):hover ul div { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0);}#main li:nth-child(3):hover ~ #marker { -webkit-transform: translate(240px, 0); -moz-transform: translate(240px, 0); -ms-transform: translate(240px, 0); transform: translate(240px, 0);} #main li:nth-child(4):hover ul div { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0);}#main li:nth-child(4):hover ~ #marker { -webkit-transform: translate(360px, 0); -moz-transform: translate(360px, 0); -ms-transform: translate(360px, 0); transform: translate(360px, 0);}