Team:SJTU-Software/freelancer.css
From 2014.igem.org
(Difference between revisions)
(Created page with " body { overflow-x: hidden; } p { font-size: 20px; } p.small { font-size: 16px; } a, a:hover, a:focus, a:active, a.active { outline: 0; color: #18bc9c; } ...") |
|||
Line 1: | Line 1: | ||
- | + | #menu { | |
- | + | width: 100%; | |
- | + | margin: 0; | |
+ | padding: 10px 0 0 0; | ||
+ | list-style: none; | ||
+ | background-color: #111; | ||
+ | background-image: linear-gradient(#444, #111); | ||
+ | border-radius: 50px; | ||
+ | box-shadow: 0 2px 1px #9c9c9c; | ||
} | } | ||
- | + | #menu li { | |
- | + | float: left; | |
+ | padding: 0 0 10px 0; | ||
+ | position: relative; | ||
} | } | ||
- | + | #menu a { | |
- | + | float: left; | |
- | + | height: 25px; | |
- | + | padding: 0 25px; | |
- | + | color: #999; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | color: # | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
text-transform: uppercase; | text-transform: uppercase; | ||
- | font | + | font: bold 12px/25px Arial, Helvetica; |
- | + | text-decoration: none; | |
+ | text-shadow: 0 1px 0 #000; | ||
} | } | ||
- | + | #menu li:hover > a { | |
- | + | color: #fafafa; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | *html #menu li a:hover { /* IE6 */ | |
- | + | color: #fafafa; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #menu li:hover > ul { | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
display: block; | display: block; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
- | + | /* Sub-menu */ | |
+ | #menu ul { | ||
+ | list-style: none; | ||
margin: 0; | margin: 0; | ||
- | + | padding: 0; | |
- | + | display: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | display: | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
position: absolute; | position: absolute; | ||
- | + | top: 35px; | |
- | + | left: 0; | |
- | + | z-index: 99999; | |
- | background: | + | background-color: #444; |
- | - | + | background-image: linear-gradient(#444, #111); |
- | -moz- | + | -moz-border-radius: 5px; |
- | + | border-radius: 5px; | |
} | } | ||
- | # | + | #menu ul li { |
- | + | float: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
margin: 0; | margin: 0; | ||
+ | padding: 0; | ||
+ | display: block; | ||
+ | box-shadow: 0 1px 0 #111111, | ||
+ | 0 2px 0 #777777; | ||
} | } | ||
- | # | + | #menu ul li:last-child { |
- | + | box-shadow: none; | |
} | } | ||
- | + | #menu ul a { | |
- | + | padding: 10px; | |
- | + | height: auto; | |
- | + | line-height: 1; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | padding | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
display: block; | display: block; | ||
- | + | white-space: nowrap; | |
- | + | float: none; | |
- | + | text-transform: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | *html #menu ul a { /* IE6 */ | |
- | + | height: 10px; | |
- | + | width: 150px; | |
} | } | ||
- | + | *:first-child+html #menu ul a { /* IE7 */ | |
- | + | height: 10px; | |
- | + | width: 150px; | |
} | } | ||
- | + | #menu ul a:hover { | |
- | color: # | + | background-color: #0186ba; |
+ | background-image: linear-gradient(#04acec, #0186ba); | ||
} | } | ||
- | + | #menu ul li:first-child a { | |
- | border- | + | border-radius: 5px 5px 0 0; |
} | } | ||
- | + | #menu ul li:first-child a:after { | |
- | + | content: ''; | |
+ | position: absolute; | ||
+ | left: 30px; | ||
+ | top: -8px; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border-left: 5px solid transparent; | ||
+ | border-right: 5px solid transparent; | ||
+ | border-bottom: 8px solid #444; | ||
} | } | ||
- | + | #menu ul li:first-child a:hover:after { | |
- | + | border-bottom-color: #04acec; | |
} | } | ||
- | + | #menu ul li:last-child a { | |
- | + | border-radius: 0 0 5px 5px; | |
- | + | ||
} | } | ||
- | + | /* Clear floated elements */ | |
- | + | #menu:after { | |
+ | visibility: hidden; | ||
+ | display: block; | ||
+ | font-size: 0; | ||
+ | content: " "; | ||
+ | clear: both; | ||
+ | height: 0; | ||
} | } | ||
- | + | #menu ul li:first-child a:after { | |
- | + | content: ''; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
position: absolute; | position: absolute; | ||
- | + | left: 30px; | |
- | + | top: -8px; | |
- | width: | + | width: 0; |
- | height: | + | height: 0; |
- | + | border-left: 5px solid transparent; | |
- | + | border-right: 5px solid transparent; | |
- | + | border-bottom: 8px solid #444; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #menu ul li:first-child a:hover:after { | |
- | + | border-bottom-color: #04acec; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } |
Latest revision as of 11:30, 2 October 2014
- menu {
width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; background-color: #111; background-image: linear-gradient(#444, #111); border-radius: 50px; box-shadow: 0 2px 1px #9c9c9c;
}
- menu li {
float: left; padding: 0 0 10px 0; position: relative;
}
- menu a {
float: left; height: 25px; padding: 0 25px; color: #999; text-transform: uppercase; font: bold 12px/25px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000;
}
- menu li:hover > a {
color: #fafafa;
}
- html #menu li a:hover { /* IE6 */
color: #fafafa;
}
- menu li:hover > ul {
display: block;
}
/* Sub-menu */
- menu ul {
list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 35px; left: 0; z-index: 99999; background-color: #444; background-image: linear-gradient(#444, #111); -moz-border-radius: 5px; border-radius: 5px;
}
- menu ul li {
float: none; margin: 0; padding: 0; display: block; box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
- menu ul li:last-child {
box-shadow: none;
}
- menu ul a {
padding: 10px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none;
}
- html #menu ul a { /* IE6 */
height: 10px; width: 150px;
}
- first-child+html #menu ul a { /* IE7 */
height: 10px; width: 150px;
}
- menu ul a:hover {
background-color: #0186ba; background-image: linear-gradient(#04acec, #0186ba);
}
- menu ul li:first-child a {
border-radius: 5px 5px 0 0;
}
- menu ul li:first-child a:after {
content: ; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444;
}
- menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
- menu ul li:last-child a {
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
- menu:after {
visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
}
- menu ul li:first-child a:after {
content: ; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444;
}
- menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}