functionality for the behaviors classes at the end of the style sheet are defined in the SpryMenuBar.js JavaScript library file. You can change the default functionality by adding properties and values to the behavior rules in the style sheet.

The following is the CSS code for the SpryMenuBarHorizontal.css file:

/*Menu Bar styling classes*/
ul.MenuBarHorizontal{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: auto;
}
ul.MenuBarActive{
	z-index: 1000;
}
ul.MenuBarHorizontal li{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 8em;
	float: left;
}
ul.MenuBarHorizontal ul{
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: 8.2em;
	position: absolute;
	left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{
	left: auto;
}
ul.MenuBarHorizontal ul li{
	width: 8.2em;
}
ul.MenuBarHorizontal ul ul{
	position: absolute;
	margin: 0 0 0 0;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{
	left: 0px;
	top: 0;
}
ul.MenuBarHorizontal ul{
	border: 0;
}
ul.MenuBarHorizontal a{
	display: block;
	cursor: pointer;
	background-color: #2E3E25;
	padding: 0.5em 0.75em;
	color: #FFF3D1;
	text-decoration: none;
	font-size: 12px;
	font-style: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{
	background-color: #50862F;
	color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
	background-color: #50862F;
	color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu{
	background-image: url(SpryMenuBarDown.gif);
	background-repeat: no-repeat;
	background-position: 0;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{
	background-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{
	background-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{
	background-image: url(SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 0%;
}
ul.MenuBarHorizontal iframe{
	position: absolute;
	z-index: 1010;
}
@media screen, projection{
	ul.MenuBarHorizontal li.MenuBarItemIE{
	display: inline;
	f\loat: left;
	background: #FFF;
	}
}