"
Template:Caltech PracticeBar
From 2012.igem.org
(Difference between revisions)
| (21 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. | /* Bring the nav above everything else--uncomment if needed. | ||
position:relative; | 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:12px; | |
| - | padding: | + | background:#000000; |
| - | + | ||
| - | background:# | + | |
text-decoration:none; | text-decoration:none; | ||
} | } | ||
#nav a:hover{ | #nav a:hover{ | ||
| - | + | background:#000000; | |
| - | background:# | + | |
text-decoration:underline; | text-decoration:underline; | ||
} | } | ||
| Line 143: | Line 142: | ||
/*--- DROPDOWN ---*/ | /*--- DROPDOWN ---*/ | ||
#nav ul{ | #nav ul{ | ||
| - | background:# | + | background:#000000; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */ |
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */ | background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */ | ||
list-style:none; | list-style:none; | ||
| Line 160: | 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:# | + | background:#000000; |
| - | text-decoration: | + | 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 167: | 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:# | + | background:#000000; |
} | } | ||
| - | |||
</style> | </style> | ||
</head> | </head> | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
</html> | </html> | ||
Latest revision as of 01:37, 18 July 2012
