html下拉导航详解,CSS技巧之下拉菜单导航特效详解

特效剖析：当鼠标滑过主导航选项时，下拉菜单由上至下依次旋转渐出，当鼠标移开时由下至上依次旋转消逝。

步骤一：构建HTML

一切菜单项均由无序列表生成，为了便当这里只给首页和关于我们添加了下拉菜单，其他的依据个人需求本人酌情添加即可。

步骤二：款式设置

1、根本款式初始化

根本款式

2、通用款式设置：“list-style: none”去掉无序列表默许款式，将一切的列表项(li)设置相同的宽高，行高"line-height"与高度相同完成文本垂直居中，display设为block并向左浮动，背景颜色给一个比拟亮堂的红色(个人爱好)，鼠标滑过是背景变暗。

通用款式

3、超链接款式设置：去掉超链接默许款式，字体颜色设为白色，鼠标滑过时字体颜色变暗。

4、下拉菜单初始化款式：为一切的下拉菜单项添加一个1像素实线白色的顶部边框“border-top:1px solid #fffff”，不透明度opacity设为0效果为完整透明，并延Y轴旋转90°，鼠标划过时恢复(后面设置)，最后添加过渡效果transition，不透明渡过渡时间为0.4s ,位置变换0.5s。

5、下拉菜单旋转效果：当鼠标滑过主导航时，下拉菜单列表项的不同明度由0变为1，位置由初始化时的旋转90°恢复到原始位置，配合上面设置的过渡属性完成动态旋转效果。

这里补充一点，有些像我一样的小白开端可能不明白".menu > li"的意义，它是CSS子元素选择器的用法，在该教程当选择的则是主导航列表 .menu 中的 li ,而不包含下拉列表 .submenu 中的 li ,由于从HTML构造中能够看出下拉列表中的 li 应该算是主导航列表 .menu 孙子辈的。

6、效果完善：假如截至到第五步你刷新页面会发现，鼠标滑过主导行时一切的下拉列表项是同时旋转而出的，并不是像效果图中那样逐一依次渐出，这里我们只需分别给每个下拉列表选项的过渡效果设置一下延迟即可