CSS---二级菜单小箭头制作

二级菜单是网页开发中经常遇到的，那么，如何通过css写一个下图所示的二级菜单样式呢？

核心内容：

（1）transform: rotate(45deg);----旋转45度

（2）border-right: transparent;border-bottom: transparent;---- 将border设置为透明色

（3）position:relative----相对定位会按照元素的原始位置对该元素进行移动，定位后空间不释放。left:20px 会向元素的 LEFT 位置添加 20 像素。

position:absolute----绝对定位，相对于最近已定位的祖先元素，如果没有最近已定位的祖先元素，则相对于body，定位后空间被释放。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

（4）:before伪元素选择器----选择器在被选元素的内容前面插入内容， content 属性来指定要插入的内容。

完整代码如下：

    
    
    
    
    



    
二级菜单小箭头css制作
    

        

            水果
            

                

                    

                        香蕉
                    
                    

                        苹果
                    
                
            

        
        

            城市
        
        

            动物