"
Team:TU Eindhoven/Template:NavPanel
From 2014.igem.org
(Difference between revisions)
| Line 48: | Line 48: | ||
position:absolute; | position:absolute; | ||
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ | left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ | ||
| - | + | ||
} | } | ||
#nav ul li{ | #nav ul li{ | ||
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */ | padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */ | ||
float:none; | float:none; | ||
| - | + | ||
} | } | ||
#nav ul a{ | #nav ul a{ | ||
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */ | white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */ | ||
| - | |||
} | } | ||
| + | |||
#nav li:hover ul{ /* Display the dropdown on hover */ | #nav li:hover ul{ /* Display the dropdown on hover */ | ||
left:0; /* Bring back on-screen when needed */ | left:0; /* Bring back on-screen when needed */ | ||
| - | + | ||
} | } | ||
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */ | #nav 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:#6b0c36; | background:#6b0c36; | ||
text-decoration:underline; | text-decoration:underline; | ||
| - | + | ; | |
} | } | ||
#nav 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. */ | #nav 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; | text-decoration:none; | ||
| - | + | ||
} | } | ||
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */ | #nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */ | ||
background:#333; | background:#333; | ||
| - | + | ||
} | } | ||
| Line 83: | Line 83: | ||
position:absolute; | position:absolute; | ||
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ | left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ | ||
| - | + | ||
} | } | ||
| Line 93: | Line 93: | ||
#nav ul a{ | #nav ul a{ | ||
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */ | white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */ | ||
| - | + | ||
} | } | ||
#nav li:hover ul{ /* Display the dropdown on hover */ | #nav li:hover ul{ /* Display the dropdown on hover */ | ||
left:0; /* Bring back on-screen when needed */ | left:0; /* Bring back on-screen when needed */ | ||
| - | + | ||
} | } | ||
| Line 103: | Line 103: | ||
background:#6b0c36; | background:#6b0c36; | ||
text-decoration:underline; | text-decoration:underline; | ||
| - | + | ||
} | } | ||
#nav 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. */ | #nav 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; | text-decoration:none; | ||
| - | + | ||
} | } | ||
</style> | </style> | ||
Revision as of 13:48, 4 August 2014
