纯CSS3制作二级导航

HTML部分
···

    
    
    
    
    
    


    

        

            

                
我的淘宝
                    

                        
天宇无敌
                        
超级天宇
                        
超级天宇无敌
                    
                
                
购物车
                    

                        
2天宇无敌2
                        
2超级天宇2
                        
2超级天宇无敌2
                    
                
                
收藏夹
                
商家支持
                
网站导航
            
        
    
    

···

CSS部分
···

   header {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    background: #f5f5f5;
  }
  header .naviga {
    width: 80%;
    height: auto;
    margin: 0 auto;
  }
  header .naviga .menu {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 header .naviga .menu li {
    flex: 1;
    width: auto;
    text-align: center;
    line-height: 40px;
  }
  header .naviga .menu li:hover {
    box-sizing: border-box;
    border-right: 1px solid #f5f5f5;
   border-left: 1px solid #f5f5f5;
    background: #fff;
 }
 header .naviga .menu li .submenu {
    display: none;
    position: fixed;
    z-index: 2;
    width: auto;
    height: auto;
    background: #fff;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-top: none;
  }
  header .naviga .menu li .submenu li {
    box-sizing: border-box;
    padding: 0 10px;
  }
  header .naviga .menu li:hover .triangle {
    animation: auR 0.3s forwards;
  }
  header .naviga .menu li:hover .submenu {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
 header .naviga .menu li:hover .submenu li {
    flex: 1;
  }
  header .naviga .menu li .triangle {
    position: relative;
    top: -2px;
    left: 5px;
    width: 0;
    height: 0;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #000 transparent;
    display: inline-block;
  }
  header .naviga .menu li .triangle:after {
    position: absolute;
    z-index: 2;
    bottom: -6px;
    left: -5px;
    content: '';
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
  }
  @keyframes auR {
    from {
      transform: rotateZ(-90deg);
      transform-origin: 50% 75%;
    }
    to {
      transform: rotateZ(-180deg);
      transform-origin: 50% 75%;
    }
  }

···