#menu {
  padding:0;
  margin:0;
  width:0; /* this will reduce the width to zero in Mozilla
, Firefox etc. If you're using Interent Explorer it will reduce to the same width as the links (9em in our case). */  
  }
#menu li {
  list-style-type:none;  /* removes bullets */
  margin:0 0 0.05em 0.75em; /* adds a bottom margin of 0.05em to each <li> tag */  
  }
  #menu a, #menu a:visited {
  position:relative; /* ADDED */ 
  display: block;    /* this will ensure that the link will be as wide as we specify. Height will be set by the font size. */ 
  width:12em;  /* sets the width of the links. */
  border:1px solid #996633;  /* adds a 1 pixel wide solid brown border. */
  font-family: "Comic Sans MS"; /* we select arial as our first choice, followed by verdana. Lastly, we set the generic font to 'sans-serif'. A generic font should always be included as the last font in the list */   
  font-size:0.9em; /* sets the font size slightly smaller than the default for the page. Using an em value allows your visitors to decide how big the font should be. */   
  text-align:center; /* centers the text within the link box */   
  text-decoration:none; /* removes the underline from the links */   
  background:#816627; /* makes the background dark green 666600 */   
  color:#eee; /* makes the text dark green */   
  padding:0.25em; /* adds 0.25em padding to each link. */  
  }
#menu a:hover {
  background:#ddd;  /* makes the background color light grey. */
  color:#996633;		/* makes the font brown.  */
  }
#menu a span {
  display:none;  /* The span is now normally hidden from view. */
}
#menu a:hover span {
  display:block;
  position:absolute; /* gives the span an absolute position. */   
  left:13em; /* sets the left position at 10em so that it will appear to the right of the menu and have a small clearance */   
  top:0; /* sets the top of the span in line with the top of the menu */ 
  text-align:left; /*  the span text is center aligned the same as the links. This will left align the text. */   
  padding:0.5em;  /*  adds a little padding to the span text */   
  width:24em; /* gives the span a width of 24em */   
  background-color:#8FBC8F; /* sets the background color to light grey */   
  color:#000; /* makes the text color black. */   
  border:1px solid #996633; /* adds a brown border to make the link bolder. */ 
}

#menu a:hover span:first-line {
  font-weight:bold;  /* makes the first line text bold. */
  font-size:1.2em;   /* makes the font slightly larger */
  color:#996633;		/* changes the text color to pbrown. */
}

.travelocity  { 
	width:9em; 
	padding:3px;
	margin:0 0 0.05em 1.25em; 
	border-style: solid;
	border-color: #009;
	border-width:3px;
}


	
