"
Template:Aquila
From 2012hs.igem.org
(Difference between revisions)
| Line 63: | Line 63: | ||
} | } | ||
| - | |||
| - | + | ||
| + | #navbar | ||
{ | { | ||
float:left; | float:left; | ||
| Line 72: | Line 72: | ||
margin:0; | margin:0; | ||
list-style-type:none; | list-style-type:none; | ||
| - | |||
} | } | ||
| - | + | #navbar a | |
{ | { | ||
float:left; | float:left; | ||
| Line 87: | Line 86: | ||
} | } | ||
| - | + | #navbar a:hover | |
{ | { | ||
background-color:#A3ABAE; | background-color:#A3ABAE; | ||
} | } | ||
| - | + | #navbar li | |
{ | { | ||
position:relative; | position:relative; | ||
| Line 98: | Line 97: | ||
} | } | ||
| - | + | #long | |
{ | { | ||
| - | + | width:10em; | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
} | } | ||
| - | + | ||
| + | .navbar | ||
{ | { | ||
| - | + | padding:0 20px; | |
| - | + | ||
| - | + | ||
} | } | ||
| - | + | /*--- DROPDOWN ---*/ | |
| + | |||
| + | #navbar ul | ||
{ | { | ||
| - | + | background:#fffff; | |
| + | background:rgba(255,255,255,0); | ||
| + | list-style:none; | ||
| + | position:absolute; | ||
| + | left:-9999px; | ||
} | } | ||
| - | + | #navbar ul li | |
{ | { | ||
| - | + | padding-top:1px; | |
| - | + | float:none; | |
| - | + | ||
} | } | ||
| - | + | #navbar a | |
{ | { | ||
| - | + | white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */ | |
} | } | ||
| - | # | + | #navbar li:hover ul |
| - | { | + | { /* Display the dropdown on hover */ |
| - | + | left:0; /* Bring back on-screen when needed */ | |
| + | } | ||
| + | #navbar li:hover a | ||
| + | { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */ | ||
| + | background:#A3ABAE; | ||
| + | text-decoration:underline; | ||
} | } | ||
| + | #navbar li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */ | ||
| + | text-decoration:none; | ||
| + | } | ||
| - | + | #navbar li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */ | |
| - | { | + | background:#333; |
| - | + | ||
} | } | ||
| Line 149: | Line 155: | ||
<!--navigation menu--> | <!--navigation menu--> | ||
| - | <ul | + | <ul id="navbar"> |
<li><a href="https://2012hs.igem.org/Team:Sharon_MA_Aquila">HOME</a></li> | <li><a href="https://2012hs.igem.org/Team:Sharon_MA_Aquila">HOME</a></li> | ||
Revision as of 04:46, 28 March 2012
