Team:Penn/PennApps
From 2013.igem.org
(Difference between revisions)
(Created page with "<div id='cssmenu'> <ul> <li class='active'><a href='index.html'><span>Home</span></a></li> <li class='has-sub'><a href='#'><span>Products</span></a> <ul> <li...") |
|||
Line 22: | Line 22: | ||
</ul> | </ul> | ||
</div> | </div> | ||
+ | |||
+ | #cssmenu ul { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | #cssmenu li { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | #cssmenu a { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | #cssmenu ul { | ||
+ | list-style: none; | ||
+ | } | ||
+ | #cssmenu a { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | #cssmenu { | ||
+ | height: 70px; | ||
+ | background-color: #232323; | ||
+ | box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); | ||
+ | width: auto; | ||
+ | } | ||
+ | #cssmenu > ul > li { | ||
+ | float: left; | ||
+ | margin-left: 15px; | ||
+ | position: relative; | ||
+ | } | ||
+ | #cssmenu > ul > li > a { | ||
+ | color: #a0a0a0; | ||
+ | font-family: Verdana, 'Lucida Grande'; | ||
+ | font-size: 15px; | ||
+ | line-height: 70px; | ||
+ | padding: 15px 20px; | ||
+ | -webkit-transition: color .15s; | ||
+ | -moz-transition: color .15s; | ||
+ | -o-transition: color .15s; | ||
+ | transition: color .15s; | ||
+ | } | ||
+ | #cssmenu > ul > li > a:hover { | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | #cssmenu > ul > li > ul { | ||
+ | opacity: 0; | ||
+ | visibility: hidden; | ||
+ | padding: 16px 0 20px 0; | ||
+ | background-color: #fafafa; | ||
+ | text-align: left; | ||
+ | position: absolute; | ||
+ | top: 55px; | ||
+ | left: 50%; | ||
+ | margin-left: -90px; | ||
+ | width: 180px; | ||
+ | -webkit-transition: all .3s .1s; | ||
+ | -moz-transition: all .3s .1s; | ||
+ | -o-transition: all .3s .1s; | ||
+ | transition: all .3s .1s; | ||
+ | -webkit-border-radius: 5px; | ||
+ | -moz-border-radius: 5px; | ||
+ | border-radius: 5px; | ||
+ | -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); | ||
+ | -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); | ||
+ | box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); | ||
+ | } | ||
+ | #cssmenu > ul > li:hover > ul { | ||
+ | opacity: 1; | ||
+ | top: 65px; | ||
+ | visibility: visible; | ||
+ | } | ||
+ | #cssmenu > ul > li > ul:before { | ||
+ | content: ''; | ||
+ | display: block; | ||
+ | border-color: transparent transparent #fafafa transparent; | ||
+ | border-style: solid; | ||
+ | border-width: 10px; | ||
+ | position: absolute; | ||
+ | top: -20px; | ||
+ | left: 50%; | ||
+ | margin-left: -10px; | ||
+ | } | ||
+ | #cssmenu > ul ul > li { | ||
+ | position: relative; | ||
+ | } | ||
+ | #cssmenu ul ul a { | ||
+ | color: #323232; | ||
+ | font-family: Verdana, 'Lucida Grande'; | ||
+ | font-size: 13px; | ||
+ | background-color: #fafafa; | ||
+ | padding: 5px 8px 7px 16px; | ||
+ | display: block; | ||
+ | -webkit-transition: background-color 0.1s; | ||
+ | -moz-transition: background-color 0.1s; | ||
+ | -o-transition: background-color 0.1s; | ||
+ | transition: background-color 0.1s; | ||
+ | } | ||
+ | #cssmenu ul ul a:hover { | ||
+ | background-color: #f0f0f0; | ||
+ | } | ||
+ | #cssmenu ul ul ul { | ||
+ | visibility: hidden; | ||
+ | opacity: 0; | ||
+ | position: absolute; | ||
+ | top: -16px; | ||
+ | left: 206px; | ||
+ | padding: 16px 0 20px 0; | ||
+ | background-color: #fafafa; | ||
+ | text-align: left; | ||
+ | width: 180px; | ||
+ | -webkit-transition: all .3s; | ||
+ | -moz-transition: all .3s; | ||
+ | -o-transition: all .3s; | ||
+ | transition: all .3s; | ||
+ | -webkit-border-radius: 5px; | ||
+ | -moz-border-radius: 5px; | ||
+ | border-radius: 5px; | ||
+ | -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); | ||
+ | -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); | ||
+ | box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); | ||
+ | } | ||
+ | #cssmenu ul ul > li:hover > ul { | ||
+ | opacity: 1; | ||
+ | left: 190px; | ||
+ | visibility: visible; | ||
+ | } | ||
+ | #cssmenu ul ul a:hover { | ||
+ | background-color: #cc2c24; | ||
+ | color: #f0f0f0; | ||
+ | } |
Revision as of 09:51, 27 September 2013
- cssmenu ul {
margin: 0; padding: 0;
}
- cssmenu li {
margin: 0; padding: 0;
}
- cssmenu a {
margin: 0; padding: 0;
}
- cssmenu ul {
list-style: none;
}
- cssmenu a {
text-decoration: none;
}
- cssmenu {
height: 70px; background-color: #232323; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); width: auto;
}
- cssmenu > ul > li {
float: left; margin-left: 15px; position: relative;
}
- cssmenu > ul > li > a {
color: #a0a0a0; font-family: Verdana, 'Lucida Grande'; font-size: 15px; line-height: 70px; padding: 15px 20px; -webkit-transition: color .15s; -moz-transition: color .15s; -o-transition: color .15s; transition: color .15s;
}
- cssmenu > ul > li > a:hover {
color: #ffffff;
}
- cssmenu > ul > li > ul {
opacity: 0; visibility: hidden; padding: 16px 0 20px 0; background-color: #fafafa; text-align: left; position: absolute; top: 55px; left: 50%; margin-left: -90px; width: 180px; -webkit-transition: all .3s .1s; -moz-transition: all .3s .1s; -o-transition: all .3s .1s; transition: all .3s .1s; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
- cssmenu > ul > li:hover > ul {
opacity: 1; top: 65px; visibility: visible;
}
- cssmenu > ul > li > ul:before {
content: ; display: block; border-color: transparent transparent #fafafa transparent; border-style: solid; border-width: 10px; position: absolute; top: -20px; left: 50%; margin-left: -10px;
}
- cssmenu > ul ul > li {
position: relative;
}
- cssmenu ul ul a {
color: #323232; font-family: Verdana, 'Lucida Grande'; font-size: 13px; background-color: #fafafa; padding: 5px 8px 7px 16px; display: block; -webkit-transition: background-color 0.1s; -moz-transition: background-color 0.1s; -o-transition: background-color 0.1s; transition: background-color 0.1s;
}
- cssmenu ul ul a:hover {
background-color: #f0f0f0;
}
- cssmenu ul ul ul {
visibility: hidden; opacity: 0; position: absolute; top: -16px; left: 206px; padding: 16px 0 20px 0; background-color: #fafafa; text-align: left; width: 180px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
- cssmenu ul ul > li:hover > ul {
opacity: 1; left: 190px; visibility: visible;
}
- cssmenu ul ul a:hover {
background-color: #cc2c24; color: #f0f0f0;
}