Team:NCTU Formosa/css/style850u
From 2013.igem.org
(7 intermediate revisions not shown) | |||
Line 4: | Line 4: | ||
#navb, .dl-back { | #navb, .dl-back { | ||
display:none; | display:none; | ||
+ | } | ||
+ | #igemlogo { | ||
+ | width:56px; | ||
+ | height:56px; | ||
+ | text-indent:-9999px; | ||
+ | margin-top: -57px; | ||
+ | position:absolute; | ||
+ | left:100%; | ||
+ | margin-left:-56px; | ||
} | } | ||
nav { | nav { | ||
Line 22: | Line 31: | ||
display:block; | display:block; | ||
float:left; | float:left; | ||
- | width: | + | width:11.11%; |
} | } | ||
.nav li, .nav li a { | .nav li, .nav li a { | ||
Line 56: | Line 65: | ||
-ms-transition: 0.7s ease-in-out; | -ms-transition: 0.7s ease-in-out; | ||
transition: 0.7s ease-in-out; | transition: 0.7s ease-in-out; | ||
- | width: | + | width: 11.11%; |
height: 3px; | height: 3px; | ||
- | top: | + | top: 30px; |
background: #38c04b; | background: #38c04b; | ||
- | margin-left:- | + | margin-left:-46px; |
} | } | ||
.nav li:nth-child(1):hover ~ .effect { | .nav li:nth-child(1):hover ~ .effect { | ||
- | left: | + | left: 5.55%; } |
.nav li:nth-child(2):hover ~ .effect { | .nav li:nth-child(2):hover ~ .effect { | ||
- | left: | + | left: 16.66%; } |
.nav li:nth-child(3):hover ~ .effect { | .nav li:nth-child(3):hover ~ .effect { | ||
- | left: | + | left: 27.77%; } |
.nav li:nth-child(4):hover ~ .effect { | .nav li:nth-child(4):hover ~ .effect { | ||
- | left: | + | left: 38.88%; } |
.nav li:nth-child(5):hover ~ .effect { | .nav li:nth-child(5):hover ~ .effect { | ||
- | left: | + | left: 49.99%; } |
.nav li:nth-child(6):hover ~ .effect { | .nav li:nth-child(6):hover ~ .effect { | ||
- | left: | + | left: 61.11%; } |
.nav li:nth-child(7):hover ~ .effect { | .nav li:nth-child(7):hover ~ .effect { | ||
- | left: | + | left: 72.22%; } |
.nav li:nth-child(8):hover ~ .effect { | .nav li:nth-child(8):hover ~ .effect { | ||
- | left: | + | left: 83.33%; } |
- | .nav li:nth-child( | + | .nav li:nth-child(9):hover ~ .effect { |
- | line-height: | + | left: 94.44%; } |
+ | .nav li:nth-child(6) a { | ||
+ | line-height:12px; | ||
} | } | ||
- | ul.nav li:nth-child( | + | ul.nav li:nth-child(6) ul { |
margin-top:-3px; | margin-top:-3px; | ||
} | } |
Latest revision as of 14:47, 25 October 2013
/* ---Calvin Hue
- /
- navb, .dl-back {
display:none; }
- igemlogo {
width:56px; height:56px; text-indent:-9999px; margin-top: -57px; position:absolute; left:100%; margin-left:-56px; } nav { display:block; width:800px; padding:0; overflow: visible; height:68px; margin: 0 auto; } .nav { font-size: 0;
text-align: center; width: 100%;
position: relative; } .nav > li{ display:block; float:left; width:11.11%; } .nav li, .nav li a { text-transform:uppercase; list-style: none; font:14px Quicksand; font-weight:700; } .nav > li a { display: block; position: relative; width:100%; float: left; padding-bottom: 20px; height:100%; text-decoration: none; color: #393939; -webkit-transition: .7s; -moz-transition: .7s; -o-transition: .7s; -ms-transition: .7s; transition: .7s; } .nav > li a:hover { color: #38c04b; } .effect {
position: absolute; left: 6.25%; -webkit-transition: 0.7s ease-in-out; -moz-transition: 0.7s ease-in-out; -o-transition: 0.7s ease-in-out; -ms-transition: 0.7s ease-in-out; transition: 0.7s ease-in-out; width: 11.11%; height: 3px; top: 30px; background: #38c04b; margin-left:-46px;
} .nav li:nth-child(1):hover ~ .effect { left: 5.55%; } .nav li:nth-child(2):hover ~ .effect { left: 16.66%; } .nav li:nth-child(3):hover ~ .effect { left: 27.77%; } .nav li:nth-child(4):hover ~ .effect { left: 38.88%; } .nav li:nth-child(5):hover ~ .effect { left: 49.99%; } .nav li:nth-child(6):hover ~ .effect { left: 61.11%; } .nav li:nth-child(7):hover ~ .effect { left: 72.22%; } .nav li:nth-child(8):hover ~ .effect { left: 83.33%; } .nav li:nth-child(9):hover ~ .effect { left: 94.44%; } .nav li:nth-child(6) a { line-height:12px; } ul.nav li:nth-child(6) ul { margin-top:-3px; } ul.nav li {position:relative;} ul.nav li ul {
padding: 0;
position: absolute; top: 100%;
left: 0; width: 275px;
-moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000;
display: none; visibility: hidden; -webkit-transiton: opacity 0.5s; -moz-transition: opacity 0.5s; -ms-transition: opacity 0.5s; -o-transition: opacity 0.5s; -transition: opacity 0.5s;
} ul.nav li ul:before { content:;
display:block; width:0; height:0; position:absolute; pointer-events: none; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom:8px solid #555; left:30px; top:-4px;
} ul.nav li ul li a { position:relative; text-transform:none;
display: block; color: #fff; font-size:14px!important;
line-height:200%!important;
padding-bottom:0px; text-shadow: 0 -1px 0 #000;
} ul.nav li ul li:nth-child(2n) a {
background: #555;
} ul.nav li ul li:nth-child(2n+1) a {
background: #5f5f5f;
} ul.nav li ul li a:hover { background: #888; color: #fff; } ul.nav li:hover ul {
display: block; visibility: visible;
}