style.css

*{
    margin: 0;
    padding: 0;
}
.container{
    margin: 50px auto;
    width:70%;
}
.container .menu{
    height: 58px;
}
body{}

ul{
    list-style: none;
}
a{
    text-decoration: none;
}
.menu li{
    min-width: 140px;
    /* 渐变色, */
    background: linear-gradient(#3d3838cc, #999999);
}
.menu>li{
    float: left;
    position: relative;
}
.menu>li:first-child{
    border-radius: 5px 0 0 0 ;
}
.menu a{
    text-align: center;
    display: block;
    color:black;
    padding: 0 25px;
    font-size: 18px;
    line-height: 36px;
}
.menu li:hover {
    background: linear-gradient(#111111,#424242);
}
.menu li:hover>a {
    color:white;
    border-left:3px solid #4682B4;
}
.menu .submenu{
    /* 不会触到 */
    max-height: 0;
    position: absolute;
    /* perspective: 400px;  景深*/
}
.menu .submenu li{
    /* 不可见 */
    visibility: hidden;

    transform: rotate3d(0,1,0,90deg);
    transition: all 0.5s;
 }
 .menu>li:hover  .submenu{
      /* 能够触到 */
    max-height: 999px;
    
 }
 .menu>li:hover li{
    /* li可见 */
    visibility: visible;
    transform: rotate3d(0,0,0,0deg);
 }
 .menu .submenu li:nth-child(1){
    transition-delay: 0ms;
 }
 .menu .submenu li:nth-child(2){
    transition-delay: 100ms;
 }
 .menu .submenu li:nth-child(3){
    transition-delay: 200ms;
 }
 .menu .submenu li:nth-child(4){
    transition-delay: 300ms;
 }
 .menu .submenu li:nth-child(5){
    transition-delay: 400ms;
 }