"
Template:Caltech PracticeBar
From 2012.igem.org
(Difference between revisions)
| (17 intermediate revisions not shown) | |||
| Line 110: | Line 110: | ||
/************************************************************/ | /************************************************************/ | ||
| - | |||
/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */ | /* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */ | ||
/*------------------------------------*\ | /*------------------------------------*\ | ||
| Line 116: | Line 115: | ||
\*------------------------------------*/ | \*------------------------------------*/ | ||
#nav{ | #nav{ | ||
| - | + | list-style:none; | |
| + | margin-bottom:0px; | ||
/* Clear floats */ | /* Clear floats */ | ||
| - | float: | + | float:left; |
width:100%; | width:100%; | ||
| + | /* Bring the nav above everything else--uncomment if needed. | ||
| + | position:relative; | ||
| + | z-index:5; | ||
| + | */ | ||
} | } | ||
#nav li{ | #nav li{ | ||
float:left; | float:left; | ||
| + | margin-right:0px; | ||
position:relative; | position:relative; | ||
} | } | ||
#nav a{ | #nav a{ | ||
| - | padding: | + | padding:12px; |
| + | background:#000000; | ||
text-decoration:none; | text-decoration:none; | ||
} | } | ||
#nav a:hover{ | #nav a:hover{ | ||
| + | background:#000000; | ||
text-decoration:underline; | text-decoration:underline; | ||
} | } | ||
| Line 139: | Line 146: | ||
list-style:none; | list-style:none; | ||
position:absolute; | position:absolute; | ||
| - | + | left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ | |
} | } | ||
#nav ul li{ | #nav ul li{ | ||
| Line 152: | Line 159: | ||
} | } | ||
#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:#000000; | ||
| + | text-decoration:none; | ||
} | } | ||
#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. */ | ||
| Line 157: | Line 166: | ||
} | } | ||
#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:#000000; | ||
} | } | ||
| - | |||
</style> | </style> | ||
</head> | </head> | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
</html> | </html> | ||
Latest revision as of 01:37, 18 July 2012
