*{ margin:0px; padding: 0px; }
 
#navbar { /* container for navbar w/colored box across page & height in px */
  position: relative;
  height:43px; width: 100%; /* span width of page */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px; color: #fff;
  margin: 0px auto; /* ensure there is no space between screen and menu */
  z-index: 999; /* ensure menu remains on top of other page elements */
  color: #000; background-color: #87a231; /* #87a231 is bright avocado */
}
 
#navbar ul { list-style-type: none; } /* Remove default bullet style */
 
#navbar ul li { /* properties of horizontal navigation bar items */
  float: left; /* make navigation horizontal */
  position: relative; /* absolute dropdowns will relate to this position */
  width: 100px;  /* width of each menu item */
  text-align: center; text-decoration: none; /* explicit just in case */
  border-bottom: 1px solid #000; /* border cells not bar to maintain alignment */
}
 
#navbar ul li a { /* anchor tag properties inside each horizontal list item */
  display: block; /* make clickable area the whole button */
  padding-top: 7px; padding-bottom: 4px; /* control dropdown position */
  text-align: center; text-decoration: none; color: #000;
}

/* be explicit about hover properties */ 
#navbar ul li:link a { background-color: #5d6e2d; color: #000; }
#navbar ul li:visited a { background-color: #5d6e2d; color: #000; }

/* add shading on the horizontal list items when hovered over for emphasis */ 
#navbar ul li:hover a { background-color: #5d6e2d; color: #fff; }
#navbar ul li:active a { background-color: #5d6e2d; color: #fff; }
/* #navbar ul li:active a.highlight { background-color: #ff0000; color: #fff; } attempt to make shading sticky for index page*/ 

/* hide the dropdown until the first unordered list is hovered over */ 
#navbar ul li ul { display: none } /* hide the drop-down menu */

#navbar ul li ul li { /* drop-down list item properties */ 
  width: 110px; height: auto; 
  border-top: 1px solid #000;
  border-bottom: none; /* unborder the cell bottoms set previously */ 
  text-align: center; color: #fff;
} 

/* position the horizontal list items when hovered over */ 
#navbar ul li:hover ul {
  display: block; 
  position: absolute; /* absolute so drop-downs remain in line with list above */
  border-bottom: 1px solid #000; /* only border the bottommost cell */ 
}

/* display the drop-down when the first list is hovered over */
#navbar ul li:hover ul li a { display: block; background-color: #87A231; color: #000; }

/* change color of drop-down items when hovered over */
#navbar ul li:hover ul li a:hover { background-color: #5d6e2d; color: #fff; }