"
Team:ZJU-China/css/js-menu.css
From 2013.igem.org
(This code is from Codrops. The resources on Codrops can be used freely in personal and commercial projects if integrated and built upon. http://tympanus.net/codrops/licensing/) |
|||
| (2 intermediate revisions not shown) | |||
| Line 3: | Line 3: | ||
padding:0; | padding:0; | ||
list-style: none; | list-style: none; | ||
| - | font-family:" | + | font-family:"Comic Sans MS", cursive; |
| - | font-size: | + | font-size:12px; |
width:1020px; | width:1020px; | ||
} | } | ||
| Line 25: | Line 25: | ||
height:85px; | height:85px; | ||
z-index:12; | z-index:12; | ||
| - | background:transparent | + | background:transparent no-repeat bottom right; |
-moz-box-shadow:0px 0px 2px #000 inset; | -moz-box-shadow:0px 0px 2px #000 inset; | ||
-webkit-box-shadow:0px 0px 2px #000 inset; | -webkit-box-shadow:0px 0px 2px #000 inset; | ||
| Line 65: | Line 65: | ||
ul.sdt_menu li span span.sdt_descr, | ul.sdt_menu li span span.sdt_descr, | ||
ul.sdt_menu li div.sdt_box a{ | ul.sdt_menu li div.sdt_box a{ | ||
| - | margin-left: | + | margin-left:10px; |
text-transform:uppercase; | text-transform:uppercase; | ||
text-shadow:1px 1px 1px #000; | text-shadow:1px 1px 1px #000; | ||
| Line 71: | Line 71: | ||
ul.sdt_menu li span span.sdt_link{ | ul.sdt_menu li span span.sdt_link{ | ||
color:#fff; | color:#fff; | ||
| - | font-size: | + | font-size:20px; |
float:left; | float:left; | ||
clear:both; | clear:both; | ||
} | } | ||
ul.sdt_menu li span span.sdt_descr{ | ul.sdt_menu li span span.sdt_descr{ | ||
| - | color:# | + | color:#fcf16e; |
float:left; | float:left; | ||
clear:both; | clear:both; | ||
| Line 98: | Line 98: | ||
clear:both; | clear:both; | ||
line-height:30px; | line-height:30px; | ||
| - | color:# | + | color:#fcf16e; |
} | } | ||
ul.sdt_menu li div.sdt_box a:first-child{ | ul.sdt_menu li div.sdt_box a:first-child{ | ||
| - | margin-top: | + | margin-top:5px; |
} | } | ||
ul.sdt_menu li div.sdt_box a:hover{ | ul.sdt_menu li div.sdt_box a:hover{ | ||
color:#fff; | color:#fff; | ||
} | } | ||
Latest revision as of 17:13, 24 September 2013
ul.sdt_menu{ margin:0; padding:0; list-style: none; font-family:"Comic Sans MS", cursive; font-size:12px; width:1020px; } ul.sdt_menu a{ text-decoration:none; outline:none; } ul.sdt_menu li{ float:left; width:150px; height:85px; position:relative; cursor:pointer; } ul.sdt_menu li > a{ position:absolute; top:0px; left:0px; width:150px; height:85px; z-index:12; background:transparent no-repeat bottom right; -moz-box-shadow:0px 0px 2px #000 inset; -webkit-box-shadow:0px 0px 2px #000 inset; box-shadow:0px 0px 2px #000 inset; } ul.sdt_menu li a img{ border:none; position:absolute; width:0px; height:0px; bottom:0px; left:85px; z-index:100; -moz-box-shadow:0px 0px 4px #000; -webkit-box-shadow:0px 0px 4px #000; box-shadow:0px 0px 4px #000; } ul.sdt_menu li span.sdt_wrap{ position:absolute; top:25px; left:0px; width:150px; height:60px; z-index:15; } ul.sdt_menu li span.sdt_active{ position:absolute; background:#111; top:85px; width:150px; height:0px; left:0px; z-index:14; -moz-box-shadow:0px 0px 4px #000 inset; -webkit-box-shadow:0px 0px 4px #000 inset; box-shadow:0px 0px 4px #000 inset; } ul.sdt_menu li span span.sdt_link, ul.sdt_menu li span span.sdt_descr, ul.sdt_menu li div.sdt_box a{ margin-left:10px; text-transform:uppercase; text-shadow:1px 1px 1px #000; } ul.sdt_menu li span span.sdt_link{ color:#fff; font-size:20px; float:left; clear:both; } ul.sdt_menu li span span.sdt_descr{ color:#fcf16e; float:left; clear:both; width:155px; /*For dumbass IE7*/ font-size:10px; letter-spacing:1px; } ul.sdt_menu li div.sdt_box{ display:block; position:absolute; width:150px; overflow:hidden; height:150px; top:85px; left:0px; display:none; background:#000; } ul.sdt_menu li div.sdt_box a{ float:left; clear:both; line-height:30px; color:#fcf16e; } ul.sdt_menu li div.sdt_box a:first-child{ margin-top:5px; } ul.sdt_menu li div.sdt_box a:hover{ color:#fff; }
