dHTML Drop Down Menu Tutorial - Part 10

The CSS

Essential Classes

The following classes MUST be included. You can append more properties, but the margin and padding for BODY must be zero. The padding on the myMenuLabelleft, myMenuLabelcenter etc. can be altered to suit your design needs.

BODY { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
		
.myMenuLabelleft { padding: 0px 0px 0px 0px; text-align: left; }		
.myMenuLabelcenter { padding: 0px 0px 0px 0px; text-align: center; }		
.myMenuLabelright { padding: 0px 0px 0px 0px; text-align: right; }		

.myMenuItemleft { padding: 0px 0px 0px 0px; text-align: left; }		
.myMenuItemcenter { padding: 0px 0px 0px 0px; text-align: center; }		
.myMenuItemright { padding: 0px 0px 0px 0px; text-align: right; }		

CSS For the menu Menu Labels

The following classes are used for the Menu Labels. They can be edited to suit.

a.MenuLabelLink	{ COLOR: #000000; FONT-SIZE: 12px;
  FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None;
  margin: 0px; padding: 0px; font-weight: bold; }
a.MenuLabelLink:link { COLOR: #000000; 
  FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None; }
a.MenuLabelLink:visited { COLOR: #000000; 
  FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None; }
a.MenuLabelLink:hover{ COLOR: #000000; 
  FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None; }
		
a.MenuLabelLinkOn { COLOR: #0000ff; FONT-SIZE: 12px;
  FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None;
  margin: 0px; padding: 0px; font-weight: bold; }
a.MenuLabelLinkOn:link { COLOR: #0000ff; 
  FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None; }
a.MenuLabelLinkOn:visited { COLOR: #0000ff; 
  FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None; }
a.MenuLabelLinkOn:hover { COLOR: #0000ff; 
  FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None; }

CSS for Menu Item and Submenu Labels

The following classes are used for the Menu Items and Submenu Labels. They can be edited as necessary.

a.MenuItemLink { COLOR: #000000; FONT-SIZE: 12px;
  FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None;
  margin: 0px; padding: 0px; font-weight: bold; }
a.MenuItemLink:link { COLOR: #000000; 
  FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None; }
a.MenuItemLink:visited { COLOR: #000000; 
  FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None; }
a.MenuItemLink:hover { COLOR: #000000; 
  FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None; }
		
a.MenuItemLinkOn { COLOR: #ff0000; FONT-SIZE: 12px;
  FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None;
  margin: 0px; padding: 0px; font-weight: bold; }
a.MenuItemLinkOn:link { COLOR: #ff0000; 
  FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None; }
a.MenuItemLinkOn:visited { COLOR: #ff0000; 
  FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None; }
a.MenuItemLinkOn:hover { COLOR: #ff0000; 
  FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: None; }

Optional CSS for absolute menu bar placement

You can add a CSS ID selector (where "myTest" is the name of your menu bar) to absolutely position your menu bar on the page.

#myTest { 
position: absolute; 
top: 100px; 
left: 100px; 
width: 450px;
padding: 0px 0px 0px 0px;
z-index: 1;