Template:DLUT China B/css/nav.css

@keyframes fadeInDown {

   0% {
       opacity: 0;
       -moz-opacity: 0;
       transform: translate3d(0, -30px, 0);
       -moz-transform: translate3d(0,-30px,0);
   }
   100% {
       opacity: 1;
       -moz-opacity: 1;
       transform: none;
       -moz-transform: none;
   }

}

1. dlutb #nav{

   width:100%;
   height: 60px;
   margin:0;
   background-color:#ee9147;

}

1. dlutb #nav ul.menu {

   height: 60px;
   padding: 0;
   color:rgb(255,230,153);
   display: table;
   margin:0 auto;

}

ul.menu > li {

   list-style: none;
   float: left;
   padding-left: 20px;
   padding-right: 20px;
   line-height: 60px;
   height: 60px;
   text-align: center;
   font-size: 18px;

}

ul.menu > li:hover {

   color: inherit;

}

ul.menu > li > ul.subMenu {

   padding: 0;
   display: none;
   position: absolute;
   z-index: 1;
   text-align: left;

}

ul.menu > li:hover > ul.subMenu {

   -webkit-animation: fadeInDown forwards .4s cubic-bezier(.19, 1, .22, 1);
   -o-animation: fadeInDown forwards .4s cubic-bezier(.19, 1, .22, 1);
   -moz-animation: fadeInDown forwards .4s cubic-bezier(.19,1,.22,1);
   animation: fadeInDown forwards .4s cubic-bezier(.19, 1, .22, 1);
   -webkit-animation-delay: 0s;
   -moz-animation-delay: 0s;
   -o-animation-delay: 0s;
   animation-delay: 0s;
   display:flex;
   display:-moz-flex;
   display:-ms-flex;
   display:-o-flex;
   display:-webkit-flex;
   -webkit-flex-flow: column;
   flex-flow: column;
   margin: 0;

}

ul.menu > li > ul.subMenu > li {

   display: block;
   position: relative;
   background-color: #ed7d31d0;
   padding: 5px 20px;
   margin: 0;
   line-height: 40px;

}

ul.menu > li > ul.subMenu > li:before {

   position: absolute;
   display: block;
   content: "";
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;

} ul.menu > li > ul.subMenu{

   box-shadow: 0 4px 10px 0 rgba(9, 16, 43, .15);

}

ul.menu > li:after {

   -webkit-transition: all .8s cubic-bezier(.19, 1, .22, 1);
   -moz-transition: all .8s cubic-bezier(.19, 1, .22, 1);
   -ms-transition: all .8s cubic-bezier(.19, 1, .22, 1);
   -o-transition: all .8s cubic-bezier(.19, 1, .22, 1);
   transition: all .8s cubic-bezier(.19, 1, .22, 1);
   content: "";
   display: block;
   width: 0;
   height: 3px;
   position: relative;
   bottom: 3px;
   background: rgb(230,95,23);
   z-index: 1;

}

ul.menu > li:hover:after {

   width: 100%;

}