Team:TU-Delft/Templates/Style
From 2013.igem.org
(Difference between revisions)
Line 211: | Line 211: | ||
padding: 20px 0px; | padding: 20px 0px; | ||
} | } | ||
+ | |||
+ | #menu, #menu ul { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | #menu { | ||
+ | width: 960px; | ||
+ | margin: 60px auto; | ||
+ | border: 1px solid #222; | ||
+ | background-color: #111; | ||
+ | background-image: linear-gradient(#444, #111); | ||
+ | border-radius: 6px; | ||
+ | box-shadow: 0 1px 1px #777; | ||
+ | } | ||
+ | #menu:before, | ||
+ | #menu:after { | ||
+ | content: ""; | ||
+ | display: table; | ||
+ | } | ||
+ | |||
+ | #menu:after { | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | #menu { | ||
+ | zoom:1; | ||
+ | } | ||
+ | #menu li { | ||
+ | float: left; | ||
+ | border-right: 1px solid #222; | ||
+ | box-shadow: 1px 0 0 #444; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #menu a { | ||
+ | float: left; | ||
+ | padding: 12px 17px; | ||
+ | color: #999; | ||
+ | text-transform: uppercase; | ||
+ | font: bold 10px Arial, Helvetica; | ||
+ | text-decoration: none; | ||
+ | text-shadow: 0 1px 0 #000; | ||
+ | } | ||
+ | |||
+ | #menu li:hover > a { | ||
+ | color: #fafafa; | ||
+ | } | ||
+ | |||
+ | *html #menu li a:hover { /* IE6 only */ | ||
+ | color: #fafafa; | ||
+ | } | ||
+ | </style> | ||
+ | <style> | ||
+ | #menu ul { | ||
+ | margin: 20px 0 0 0; | ||
+ | _margin: 0; /*IE6 only*/ | ||
+ | opacity: 0; | ||
+ | visibility: hidden; | ||
+ | position: absolute; | ||
+ | top: 38px; | ||
+ | left: 0; | ||
+ | z-index: 1; | ||
+ | background: #444; | ||
+ | background: linear-gradient(#444, #111); | ||
+ | box-shadow: 0 -1px 0 rgba(255,255,255,.3); | ||
+ | border-radius: 3px; | ||
+ | transition: all .2s ease-in-out; | ||
+ | } | ||
+ | |||
+ | #menu li:hover > ul { | ||
+ | opacity: 1; | ||
+ | visibility: visible; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | #menu ul ul { | ||
+ | top: 0; | ||
+ | left: 150px; | ||
+ | margin: 0 0 0 20px; | ||
+ | _margin: 0; /*IE6 only*/ | ||
+ | box-shadow: -1px 0 0 rgba(255,255,255,.3); | ||
+ | } | ||
+ | |||
+ | #menu ul li { | ||
+ | float: none; | ||
+ | display: block; | ||
+ | border: 0; | ||
+ | _line-height: 0; /*IE6 only*/ | ||
+ | box-shadow: 0 1px 0 #111, 0 2px 0 #666; | ||
+ | } | ||
+ | |||
+ | #menu ul li:last-child { | ||
+ | box-shadow: none; | ||
+ | } | ||
+ | |||
+ | #menu ul a { | ||
+ | padding: 10px; | ||
+ | width: 130px; | ||
+ | _height: 10px; /*IE6 only*/ | ||
+ | display: block; | ||
+ | white-space: nowrap; | ||
+ | float: none; | ||
+ | text-transform: none; | ||
+ | } | ||
+ | |||
+ | #menu ul a:hover { | ||
+ | background-color: #0186ba; | ||
+ | background-image: linear-gradient(#04acec, #0186ba); | ||
+ | } | ||
+ | |||
</style> | </style> | ||
</html> | </html> |
Revision as of 10:12, 19 April 2013