Difference between revisions of "Template:DLUT China B/css/nav.css"

Revision as of 06:33, 7 September 2018 (view source) Yd821607 (Talk | contribs) (修改颜色与字号。) ← Older edit		Revision as of 08:51, 11 September 2018 (view source) Yd821607 (Talk | contribs) (修正最后一个导航项溢出页面的问题。) Newer edit →
Line 10:		Line 10:
	}		}
−	ul.menu{	+	ul.menu {
	height: 2em;		height: 2em;
	width: max-content;		width: max-content;
−	padding:0;	+	padding: 0;
	}		}
Line 26:		Line 26:
	}		}
−	ul.menu > li:hover{	+	ul.menu > li:hover {
−	color:inherit;	+	color: inherit;
	}		}
Line 47:		Line 47:
	display: flex;		display: flex;
	flex-flow: column;		flex-flow: column;
−	margin:0;	+	margin: 0;
		+	}
		+
		+	ul.menu > li:last-child > ul.subMenu {
		+	right: 0;
	}		}
Line 76:		Line 80:
	width: 0;		width: 0;
	height: 3px;		height: 3px;
−	position:relative;	+	position: relative;
−	bottom:3px;	+	bottom: 3px;
	background: #41cd52;		background: #41cd52;
	z-index: 1;		z-index: 1;
	}		}
		+
	ul.menu > li:hover:after {		ul.menu > li:hover:after {
	width: 100%;		width: 100%;
	}		}

---

Revision as of 08:51, 11 September 2018

@keyframes fadeInDown {

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

}

ul.menu {

   height: 2em;
   width: max-content;
   padding: 0;

}

ul.menu > li {

   list-style: none;
   float: left;
   padding-left: 10px;
   padding-right: 10px;
   line-height: 2em;
   text-align: center;
   font-size: 16px;

}

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 {

   animation-name: fadeInDown;
   animation-fill-mode: forwards;
   animation-duration: .4s;
   animation-timing-function: cubic-bezier(.19, 1, .22, 1);
   animation-delay: 0s;
   display: -ms-flexbox;
   display: flex;
   flex-flow: column;
   margin: 0;

}

ul.menu > li:last-child > ul.subMenu {

   right: 0;

}

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

   display: block;
   position: relative;
   background-color: #f7f7f7;
   padding: 5px 20px;
   margin: 0;

}

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

   position: absolute;
   display: block;
   content: "";
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   box-shadow: 0 4px 10px 0 rgba(9, 16, 43, .15);
   z-index: -1;

}

ul.menu > li:after {

   transition: all .8s cubic-bezier(.19, 1, .22, 1);
   content: "";
   display: block;
   width: 0;
   height: 3px;
   position: relative;
   bottom: 3px;
   background: #41cd52;
   z-index: 1;

}

ul.menu > li:hover:after {

   width: 100%;

}