当我们制作一级菜单时，如果有下拉二级菜单擢爻充种的存在，我们想在一级菜单上面添加一个向下的箭头，当二级菜单下拉出现时，箭头图标就旋转为向上的方向。接下来将分享一下如何制作出这样的旋转图标。
工具/原料
电脑
Hbuilder
方法/步骤
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、运行，查看最后中的效果。当鼠标移入一级菜单时，二级菜单下拉的同时，箭头图标旋转向上。
