Team:CSU Fort Collins/Project/
From 2014.igem.org
(Difference between revisions)
m |
m |
||
Line 1: | Line 1: | ||
- | |||
- | |||
<html> | <html> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
<style type="text/css"> | <style type="text/css"> | ||
- | + | nav ul ul { | |
- | + | display: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | nav ul li:hover > ul { | |
- | + | display: block; | |
- | + | } | |
- | + | nav ul { | |
- | + | background: #efefef; | |
+ | background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); | ||
+ | background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); | ||
+ | background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); | ||
+ | box-shadow: 0px 0px 9px rgba(0,0,0,0.15); | ||
+ | padding: 0 20px; | ||
+ | border-radius: 10px; | ||
+ | list-style: none; | ||
+ | position: relative; | ||
+ | display: inline-table; | ||
} | } | ||
- | + | nav ul:after { | |
- | + | content: ""; clear: both; display: block; | |
- | + | } | |
- | + | nav ul li { | |
- | + | float: left; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | ul ul { | + | nav ul li:hover { |
- | display: none; | + | background: #4b545f; |
+ | background: linear-gradient(top, #4f5964 0%, #5f6975 40%); | ||
+ | background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); | ||
+ | background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); | ||
+ | } | ||
+ | nav ul li:hover a { | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | nav ul li a { | ||
+ | display: block; padding: 25px 40px; | ||
+ | color: #757575; text-decoration: none; | ||
+ | } | ||
+ | nav ul ul { | ||
+ | background: #5f6975; border-radius: 0px; padding: 0; | ||
+ | position: absolute; top: 100%; | ||
} | } | ||
- | + | nav ul ul li { | |
- | ul | + | float: none; |
- | + | border-top: 1px solid #6b727c; | |
+ | border-bottom: 1px solid #575f6a; | ||
+ | position: relative; | ||
} | } | ||
- | + | nav ul ul li a { | |
+ | padding: 15px 40px; | ||
+ | color: #fff; | ||
+ | } | ||
+ | nav ul ul li a:hover { | ||
+ | background: #4b545f; | ||
+ | } | ||
+ | nav ul ul ul { | ||
+ | position: absolute; left: 100%; top:0; | ||
+ | } | ||
</style> | </style> | ||
- | + | <nav> | |
- | < | + | <ul> |
- | + | <li><a href="#">Home</a></li> | |
- | + | <li><a href="#">Tutorials</a> | |
- | <ul> | + | <ul> |
- | + | <li><a href="#">Photoshop</a></li> | |
- | <li | + | <li><a href="#">Illustrator</a></li> |
- | <li | + | <li><a href="#">Web Design</a> |
- | + | <ul> | |
- | + | <li><a href="#">HTML</a></li> | |
- | + | <li><a href="#">CSS</a></li> | |
- | + | </ul> | |
- | + | </li> | |
- | <li | + | </ul> |
- | + | </li> | |
- | + | <li><a href="#">Articles</a> | |
- | + | <ul> | |
- | + | <li><a href="#">Web Design</a></li> | |
- | + | <li><a href="#">User Experience</a></li> | |
- | + | </ul> | |
- | + | </li> | |
- | <li | + | <li><a href="#">Inspiration</a></li> |
- | + | </ul> | |
- | + | </nav> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | <li | + | |
- | </ul> | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | </ | + | |
</html> | </html> |
Revision as of 15:26, 18 June 2014