.menubar{
  list-style-type: none;
  margin:0px;
  padding:0px;
  width:100%; /* width of menu (don't forget to add border width below!) */
  white-space:nowrap;
  overflow:hidden;
}
.menubar ul {
  border-left:16px solid skyblue; /* thick left border of menu */
}
.menubar li{
  border-bottom: 1px solid skyblue; /* Gray border beneath each menu item */
}

.menubar li a{
  background:white url(../images/menubar.gif) repeat-y left top; /* Background image positioned to the left(v) top(h) corner initially */
  font:bold 14px Verdana;
  display:block;
  color:black;
  width:100%;
  border-bottom:1px solid white; /* White border beneath each menu item link, to add depth */
  padding:7px 0; /* Vertical (top/bottom) padding for each menu link */
  text-indent:8px;
  text-decoration:none;
}
.menubar li a:visited, .menubar li a:active{
  color: black;
}
.menubar li a:hover{
  background-position:-387px 0; /* Shift background image horizontally 387px, or the start of the 2nd background image */
  color:black;
}
.menubar li.lastitem,.menubar li.lastitem a{
  border-bottom-width:0; /* For last menu item within menu, remove bottom border */
}
.menubar li.lastitem a{
  padding:8px 0; /* increase vertical border of last menu link by 2px (default is padding: 7px 0) to account for removed border width */
}