css3鼠标移入一级菜单箭头图标向上旋转

1、首先我们创建一个【外层div】

然后在【外层div】里面创建【一级菜单】

一级菜单中包括【a链接】和【箭头图标】

2、为【一级菜单】定义样式。

确定其宽高大小，以及背景颜色。

3、运行，查看一下【一级菜单】的效果。

4、接下来设置里层的【a链接标签】和【箭头图标】

这里是使用float把二者浮动为水平排列，并使二者在一级菜单的水平居中位置

也可以使用position绝对定位，利用Chrome来调试出合适的位置。

5、运行，查看一下【一级菜单】的整体效果。

6、小伙伴们如果想更清楚的知道位置该如何设定，即偏移量该如何设置，可以查看下图。

有明确的排版图和计算方法。

7、接下来为【箭头图标】设置旋转动画。

当鼠标移入到【一级菜单】时，【箭头图标】顺时针旋转180度。

用到的是css3的transform，rotate为旋转属性。

8、运行查看动画效果。

可以看到，当鼠标移入到一级菜单时，箭头图标旋转180度，由向下的方向变为向上。

9、那么我们把二级菜单加进去，看一下完整的效果。

二级菜单依然放在【最外层div】的里面，并且与一级菜单同级。这样的结构是为了在制作二级菜单下拉效果的时候，能避免一些不必要的麻烦。

样式就不写出来了，大家可以自由设置。

如果小伙伴们不知道二级菜单下拉效果如何制作，可以借鉴

https://jingyan.baidu.com/article/af9f5a2de970ea03140a459d.html

10、运行，查看最后中的效果。

当鼠标移入一级菜单时，二级菜单下拉的同时，箭头图标旋转向上。