XiaojiangLi (Talk | contribs) |
XiaojiangLi (Talk | contribs) |
||
Line 11: | Line 11: | ||
margin: 0 auto; | margin: 0 auto; | ||
height:100%; | height:100%; | ||
− | background:url( | + | background:url(image/T--FAFU-CHINA--12.1.png) scroll center; |
background-repeat:no-repeat; | background-repeat:no-repeat; | ||
background-size:100%; | background-size:100%; | ||
Line 39: | Line 39: | ||
} | } | ||
− | . | + | |
+ | |||
+ | .menuss, .menuss ul { | ||
list-style: none; | list-style: none; | ||
padding: 0; | padding: 0; | ||
Line 45: | Line 47: | ||
} | } | ||
− | . | + | .menuss { |
height: 58px; | height: 58px; | ||
margin-top: 20px; | margin-top: 20px; | ||
} | } | ||
− | . | + | .menuss li { |
background-color: #0C0000; | background-color: #0C0000; | ||
border-bottom: 2px solid #181818; | border-bottom: 2px solid #181818; | ||
Line 57: | Line 59: | ||
} | } | ||
− | . | + | .menuss > li { |
display: block; | display: block; | ||
float: left; | float: left; | ||
Line 65: | Line 67: | ||
− | . | + | .menuss > li:first-child { |
border-radius: 25px 0 0 0; | border-radius: 25px 0 0 0; | ||
} | } | ||
− | . | + | .menuss > li:last-child { |
border-radius: 0 25px 0 0; | border-radius: 0 25px 0 0; | ||
} | } | ||
Line 74: | Line 76: | ||
− | . | + | .menuss a { |
border-left: 3px solid rgba(0, 0, 0, 0); | border-left: 3px solid rgba(0, 0, 0, 0); | ||
/*background: url("../img/back.jpg");*/ | /*background: url("../img/back.jpg");*/ | ||
Line 86: | Line 88: | ||
} | } | ||
− | . | + | .menuss li:hover { |
background-color: #1c1c1c; | background-color: #1c1c1c; | ||
background: -moz-linear-gradient(#1c1c1c, #1b1b1b); | background: -moz-linear-gradient(#1c1c1c, #1b1b1b); | ||
Line 107: | Line 109: | ||
color: #C4302B; | color: #C4302B; | ||
} | } | ||
− | . | + | .menuss li:hover > a { |
border-radius: 5px 0 0 0; | border-radius: 5px 0 0 0; | ||
border-left: 3px solid #C4302B; | border-left: 3px solid #C4302B; | ||
Line 113: | Line 115: | ||
} | } | ||
− | . | + | .submenuss { |
left: 0; | left: 0; | ||
max-height: 0; | max-height: 0; | ||
Line 126: | Line 128: | ||
} | } | ||
− | . | + | .submenuss li { |
opacity: 0; | opacity: 0; | ||
-webkit-transform: rotateY(90deg); | -webkit-transform: rotateY(90deg); | ||
Line 141: | Line 143: | ||
} | } | ||
− | . | + | .menuss .submenuss li:hover a { |
border-left: 3px solid #454545; | border-left: 3px solid #454545; | ||
border-radius: 0; | border-radius: 0; | ||
Line 147: | Line 149: | ||
} | } | ||
− | . | + | .menuss > li:hover .submenuss, .menuss > li:focus .submenuss { |
max-height: 2000px; | max-height: 2000px; | ||
z-index: 10; | z-index: 10; | ||
} | } | ||
− | . | + | .menuss > li:hover .submenuss li, .menuss > li:focus .submenuss li { |
opacity: 1; | opacity: 1; | ||
-webkit-transform: none; | -webkit-transform: none; | ||
Line 161: | Line 163: | ||
} | } | ||
/*动画递进的时间 实现一个个螺旋子菜单*/ | /*动画递进的时间 实现一个个螺旋子菜单*/ | ||
− | . | + | .menuss li:hover .submenuss li:nth-child(1) { |
-webkit-transition-delay: 0s; | -webkit-transition-delay: 0s; | ||
-moz-transition-delay: 0s; | -moz-transition-delay: 0s; | ||
Line 169: | Line 171: | ||
} | } | ||
− | . | + | .menuss li:hover .submenuss li:nth-child(2) { |
-webkit-transition-delay: 50ms; | -webkit-transition-delay: 50ms; | ||
-moz-transition-delay: 50ms; | -moz-transition-delay: 50ms; | ||
Line 177: | Line 179: | ||
} | } | ||
− | . | + | .menuss li:hover .submenuss li:nth-child(3) { |
-webkit-transition-delay: 100ms; | -webkit-transition-delay: 100ms; | ||
-moz-transition-delay: 100ms; | -moz-transition-delay: 100ms; | ||
Line 185: | Line 187: | ||
} | } | ||
− | . | + | .menuss li:hover .submenuss li:nth-child(4) { |
-webkit-transition-delay: 150ms; | -webkit-transition-delay: 150ms; | ||
-moz-transition-delay: 150ms; | -moz-transition-delay: 150ms; | ||
Line 193: | Line 195: | ||
} | } | ||
− | . | + | .menuss li:hover .submenuss li:nth-child(5) { |
-webkit-transition-delay: 200ms; | -webkit-transition-delay: 200ms; | ||
-moz-transition-delay: 200ms; | -moz-transition-delay: 200ms; | ||
Line 201: | Line 203: | ||
} | } | ||
− | . | + | .menuss li:hover .submenuss li:nth-child(6) { |
-webkit-transition-delay: 250ms; | -webkit-transition-delay: 250ms; | ||
-moz-transition-delay: 250ms; | -moz-transition-delay: 250ms; | ||
Line 209: | Line 211: | ||
} | } | ||
− | . | + | .menuss li:hover .submenuss li:nth-child(7) { |
-webkit-transition-delay: 300ms; | -webkit-transition-delay: 300ms; | ||
-moz-transition-delay: 300ms; | -moz-transition-delay: 300ms; | ||
Line 217: | Line 219: | ||
} | } | ||
− | . | + | .menuss li:hover .submenuss li:nth-child(8) { |
-webkit-transition-delay: 350ms; | -webkit-transition-delay: 350ms; | ||
-moz-transition-delay: 350ms; | -moz-transition-delay: 350ms; | ||
Line 225: | Line 227: | ||
} | } | ||
− | . | + | .submenuss li:nth-child(1) { |
-webkit-transition-delay: 350ms; | -webkit-transition-delay: 350ms; | ||
-moz-transition-delay: 350ms; | -moz-transition-delay: 350ms; | ||
Line 233: | Line 235: | ||
} | } | ||
− | . | + | .submenuss li:nth-child(2) { |
-webkit-transition-delay: 300ms; | -webkit-transition-delay: 300ms; | ||
-moz-transition-delay: 300ms; | -moz-transition-delay: 300ms; | ||
Line 241: | Line 243: | ||
} | } | ||
− | . | + | .submenuss li:nth-child(3) { |
-webkit-transition-delay: 250ms; | -webkit-transition-delay: 250ms; | ||
-moz-transition-delay: 250ms; | -moz-transition-delay: 250ms; | ||
Line 249: | Line 251: | ||
} | } | ||
− | . | + | .submenuss li:nth-child(4) { |
-webkit-transition-delay: 200ms; | -webkit-transition-delay: 200ms; | ||
-moz-transition-delay: 200ms; | -moz-transition-delay: 200ms; | ||
Line 257: | Line 259: | ||
} | } | ||
− | . | + | .submenuss li:nth-child(5) { |
-webkit-transition-delay: 150ms; | -webkit-transition-delay: 150ms; | ||
-moz-transition-delay: 150ms; | -moz-transition-delay: 150ms; | ||
Line 265: | Line 267: | ||
} | } | ||
− | . | + | .submenuss li:nth-child(6) { |
-webkit-transition-delay: 100ms; | -webkit-transition-delay: 100ms; | ||
-moz-transition-delay: 100ms; | -moz-transition-delay: 100ms; | ||
Line 273: | Line 275: | ||
} | } | ||
− | . | + | .submenuss li:nth-child(7) { |
-webkit-transition-delay: 50ms; | -webkit-transition-delay: 50ms; | ||
-moz-transition-delay: 50ms; | -moz-transition-delay: 50ms; | ||
Line 281: | Line 283: | ||
} | } | ||
− | . | + | .submenuss li:nth-child(8) { |
-webkit-transition-delay: 0s; | -webkit-transition-delay: 0s; | ||
-moz-transition-delay: 0s; | -moz-transition-delay: 0s; | ||
Line 291: | Line 293: | ||
</style> | </style> | ||
− | + | <div class="nav"> | |
− | <ul class=" | + | <ul class="menuss"> |
<li class="xyz"><a href="https://2017.igem.org/Team:FAFU-CHINA">HOME</a></li> | <li class="xyz"><a href="https://2017.igem.org/Team:FAFU-CHINA">HOME</a></li> | ||
<li><a href="javascript:;">PROJECT</a> | <li><a href="javascript:;">PROJECT</a> | ||
− | <ul class=" | + | <ul class="submenuss"> |
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/Description">Description</a></li> | <li><a href="https://2017.igem.org/Team:FAFU-CHINA/Description">Description</a></li> | ||
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/Experiments">Experiments</a></li> | <li><a href="https://2017.igem.org/Team:FAFU-CHINA/Experiments">Experiments</a></li> | ||
Line 308: | Line 310: | ||
<li><a href="https://2017.igem.org/Team:FAFU-CHINA/Team">Team</a></li> | <li><a href="https://2017.igem.org/Team:FAFU-CHINA/Team">Team</a></li> | ||
</ul> | </ul> | ||
− | + | </div> | |
</div> | </div> | ||
Revision as of 08:57, 11 August 2017