Template:TJU China/nav css

 /* 用于导航栏的格式要求 */

 * {
   margin: 0;
   padding: 0;
   list-style-type: none;
   list-style-image: none !important;

}

ul.drop {

   padding-left: 0;

}

ul {

   list-style-type: none !important;

}

li {

   list-style-type: none !important;

}

.nav_logo_pic {

   width: 20px;
   height: 20px;
   margin-top: 15px;
   float: left;
   margin-left: 30px;

}

.nav_logo_pic img {

   max-width: 100%;
   height: auto;

}

.nav {

   list-style-type: none;
   background: #ffffff;
   color: #4e72b8;
   width: 100%;
   height: 52px;
   padding: 0px;
   position: fixed;
   top: 16px;
   text-align: center;
   background-size: cover;
   font-family: "Microsoft YaHei", "Raleway", sans-serif;
   letter-spacing: 0px;
   z-index: 100;

}

.logo {

   position: fixed;
   margin-left: 20px;
   margin-top: 5px;
   width: 80px;
   height: 40px;
   z-index: 101;

}

.logo_picture {

   max-width: 100%;
   height: auto;

}

.main {

   list-style-type: none;
   display: flex;
   justify-content: space-around;

}

.main li {

   list-style-type: none;

}

.main>li {

   list-style-type: none;
   width: 13%;

}

.main>li a {

   list-style-type: none;
   border-left: 0px solid rgba(23, 23, 50, 1);

}

.nav a {

   list-style-type: none;
   text-decoration: none;
   color: #4e72b8;
   text-transform: capitalize;
   font-family: monospace;
   display: block;
   padding: 14px 15px;

   font-size: 15px;
   font-weight: bold;
   font-family: "Microsoft YaHei", "Raleway", sans-serif;

}

.nav a:hover {

   list-style-type: none;
   background: #eee;

}

.drop li {

   list-style-type: none;
   opacity: 0;
   transform-origin: top center;

}

.drop li a {

   list-style-type: none;
   background-color: #ffffff;

   padding: 10px 0;

}

.nav ul li {

   list-style-type: none;

}

.nav ul li ul {

   list-style-type: none;
   display: none;
   width: 100%;
   margin-left: 0;

margin-top: 0; }

.nav ul li:hover ul {

   list-style-type: none;
   display: block;

}

.nav ul li ul li {

   width: 100%;
   list-style-type: none;
   margin-top: 0;
   margin-bottom: 0;

}

/*------------- menu1 animation---------------*/

.main li:hover .menu1 li:first-of-type {

   animation: menu1 0s ease-in-out forwards;
   animation-delay: 0s;

}

.main li:hover .menu1 li:nth-of-type(2) {

   animation: menu1 0s ease-in-out forwards;
   animation-delay: 0s;

}

.main li:hover .menu1 li:nth-of-type(3) {

   animation: menu1 0s ease-in-out forwards;
   animation-delay: 0s;

}

.main li:hover .menu1 li:last-of-type {

   animation: menu1 0s ease-in-out forwards;
   animation-delay: 0s;

}

@keyframes menu1 {

   from {
       opacity: 0;
       transform: translateX(30px) rotateY(90deg);
   }
   to {
       opacity: 1;
       transform: translateX(0) rotateY(0);
   }

}

/*------------- menu2 animation -------------------*/

.main li:hover .menu2 li:first-of-type {

   animation: menu2 0s ease-in-out forwards;
   animation-delay: 0s;

}

.main li:hover .menu2 li:nth-of-type(2) {

   animation: menu2 0s ease-in-out forwards;
   animation-delay: 0s;

}

.main li:hover .menu2 li:nth-of-type(3) {

   animation: menu2 0s ease-in-out forwards;
   animation-delay: 0s;

}

.main li:hover .menu2 li:nth-of-type(4) {

   animation: menu2 0s ease-in-out forwards;
   animation-delay: 0s;

}

.main li:hover .menu2 li:last-of-type {

   animation: menu2 0s ease-in-out forwards;
   animation-delay: 0s;

}

@keyframes menu2 {

   0% {
       opacity: 0;
       transform: scale(0.7);
   }
   50% {
       opacity: 0.5;
       transform: scale(1.1);
   }
   100% {
       opacity: 1;
       transform: scale(1);
   }

}

.main li:hover .menu3 li:first-of-type {

   animation: menu3 0s ease-in-out forwards;
   animation-delay: 0s;

}

.main li:hover .menu3 li:last-of-type {

   animation: menu3 0s ease-in-out forwards;
   animation-delay: 0s;

}

@keyframes menu3 {

   0% {
       opacity: 0;
       transform: scale(0.7);
   }
   50% {
       opacity: 0.5;
       transform: scale(1.1);
   }
   100% {
       opacity: 1;
       transform: scale(1);
   }

}

.main li:hover .menu7 li:first-of-type {

   animation: menu7 0s ease-in-out forwards;
   animation-delay: 0s;

}

.main li:hover .menu7 li:nth-of-type(2) {

   animation: menu7 0s ease-in-out forwards;
   animation-delay: 0s;

}

.main li:hover .menu7 li:last-of-type {

   animation: menu7 0s ease-in-out forwards;
   animation-delay: 0s;

}

@keyframes menu7 {

   0% {
       opacity: 0;
       transform: rotateX(-90deg);
   }
   100% {
       opacity: 1;
       transform: rotateX(0);
   }

} .main li:hover .menu4 li:first-of-type {

   animation: menu4 0s ease-in-out forwards;
   animation-delay: 0s;

}

.main li:hover .menu4 li:nth-of-type(2) {

   animation: menu4 0s ease-in-out forwards;
   animation-delay: 0s;

}

.main li:hover .menu4 li:last-of-type {

   animation: menu4 0s ease-in-out forwards;
   animation-delay: 0s;

}

@keyframes menu4 {

   0% {
       opacity: 0;
       transform: rotateX(-90deg);
   }
   100% {
       opacity: 1;
       transform: rotateX(0);
   }

}