/* define a menu id class */

/* create a list style without bullits */
#menu ul
{
  margin: 0px;
  padding: 0px;
  list-style-type: none;  /* no bullets */
}

/* create a list item style */

#menu li
{
 float: left;  /* horizontal menu */
 margin-right: 0.5em;  /* margin 1 character wide */
 display: block;  /* display mode block */
 width: 8em;   /* fixed width 0f 8ems, or about 16 characters */
 color: white;  /* white text */ 
 background-color: blue;  /* blue background */
 text-align: center;  /* center it in the block */
}

/* create a reference link style without the underline and uses block mode display */
#menu a
{
  text-decoration: none; /* remove the underline from the link */
  text-align: center;      /* center in the block */
  color: white;         /* use white text */
  display: block;    /* use block mode */
}

/* change the background to teal when you have the cursor over it */

#menu li:hover
{
  background-color: teal;
}

/* define make sublist hidden until you hover over their items */

#menu li ul
{
 display: none;  /* don't display it */
}


/*  display the submenu when you hover over its li */

#menu li:hover ul
{
 display: block;
}

/* define a clear that removes the float left, a break needs to go after the menu lists  */

#menu br
{
 clear:both;
}