"
Template:Team:Leeds TopSectionHeader
From 2013.igem.org
m |
m |
||
| Line 6: | Line 6: | ||
font-size: 0; | font-size: 0; | ||
border-radius: 5px; | border-radius: 5px; | ||
| - | top: | + | top: 10px; |
list-style: none; | list-style: none; | ||
| - | padding: | + | padding: 5px 10px; |
left: 33%; | left: 33%; | ||
background: #5f5f5f; | background: #5f5f5f; | ||
| Line 39: | Line 39: | ||
background: #5f5f5f; | background: #5f5f5f; | ||
color: transparent; /* bullet point colours - set to transparent */ | color: transparent; /* bullet point colours - set to transparent */ | ||
| - | padding: 0px; | + | padding: 8px 0px; |
list-style: none; | list-style: none; | ||
margin: none; | margin: none; | ||
| Line 112: | Line 112: | ||
background-color: red; | background-color: red; | ||
color: pink; | color: pink; | ||
| - | margin-left: | + | margin-left: 0px; |
-webkit-transition: all 1s ease-in-out; | -webkit-transition: all 1s ease-in-out; | ||
-moz-transition: all 1s ease-in-out; | -moz-transition: all 1s ease-in-out; | ||
Revision as of 11:46, 4 October 2013
/* CSS styling for Dropdown Menu */
- dropdown {
width: 600px;
height: auto;
font-family: 'AlteHaasGroteskBold', verdana; font-size: 0;
border-radius: 5px;
top: 10px;
list-style: none;
padding: 5px 10px;
left: 33%;
background: #5f5f5f;
color: pink;
margin: none;
border: none;
}
- dropdown > a {
display: none; }
- dropdown li {
position: relative;
vertical-align: text-top;
}
- dropdown li a {
color: #fff; /* Menubox link text color, before rollover */ display: block; }
- dropdown li a:active {
background-color: purple !important; }
/* first level */
- dropdown > ul {
height: auto; background: #5f5f5f;
color: transparent; /* bullet point colours - set to transparent */
padding: 8px 0px;
list-style: none;
margin: none;
}
- dropdown > ul > li { /* Menubox settings */
width: 150px; height: 100%;
top: 0px; /* Border overlap fix, 0 if no border */ float: left;
}
- dropdown > ul > li > a { /* Menubox settings */
height: 100%;
width: auto;
vertical-align: text-top;
font-size: 10pt;
text-decoration: none;
text-align: center;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
- dropdown > ul > li:not( :last-child ) > a {
border: none; /*segregation border, good for highlight */ }
- dropdown > ul > li:hover > a,
- dropdown > ul:not( :hover ) > li.active > a { /*Menubox rollover settings */
background-color: purple;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
/* second level */
- dropdown li ul { /* Drop-down pre-rollover settings */
background-color: purple; /* Set to match parent rollover */ display: none;
text-indent: none;
list-style: none;
border: none;
margin-left: 0px;
position: absolute; top: 100%; /* Prevents overlap with parent element */ }
- dropdown li:hover ul {
display: block;
right: 0px;
}
- dropdown li:not( :first-child ):hover ul {
left: 0px; /* only necessary if using border for parent */ }
- dropdown li ul a { /* Drop-down pre-rollover settings */
font-size: 8pt; border-top: none; /*Border useful for highlights */ padding: 15px 0px; /* padding between sub-links */
margin: none;
text-decoration: none;
text-indent: none;
text-align: left;
}
- dropdown li ul li a:hover,
- dropdown li ul:not( :hover ) li.active a { /* Drop-down rollover settings */
background-color: red;
color: pink;
margin-left: 0px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
