HAL-PC Web Technolgies SIG

Mail List | SIG Leader

Menu Buttons with CSS Rollovers

HAL-PC Web Technologies SIG

Making a navigation links with rollovers using CSS

To make the menu on the left, code in either separate linked CSS file or head section of the page.
Note: Because of the cascading nature of CSS rules make sure that you put your link, visited, hover and active in just that order or you will not see them the way you intended.

.nav1 { 
	float: fight;
	width: 175px;
}
.nav1 a {
	text-decoration: none;
	background-color: silver;
	border:thin solid #000000;
	  padding: 5px;
	color: #000000;
	font-weight: Bold;
	width:170px;
	display: block; 
}
.nav1 a:visited {
	background-color: silver;
}
.nav1 a:hover {
    background-color: #000000;
	color: #ffffff;
}
.nav1 a:active {
	background-color: silver;
}
-->
</style>

The above works in standards compliant browsers but does not work properly in NN 4.x for that you have to use tables to display your menu. Use the link for the Netscape 4 version above or With Tables for NN 4.x

About Us | Site Map | Advanced Search | Privacy Policy | Contact Us | ©1999-2006 HAL-PC Web Technologies SIG Leader Cheryl D. Wise