/* CSS code */
.array {
  background-color:#654321; /* set the background color of the menu bar */
}
.stickyarray {
  background-color:#654321; 	/* set the background color of the menu sticky bar */
 position: fixed;		/* This property sets the position of the element to fixed, which means it 					stays in the same place even when the page is scrolled */
  /* top: 0; 			 This property sets the distance of the element from the top edge of the 					page to 0 pixels */
  /* width: 100%;           /* This property sets the width of the element to 100% of the parent element's width */
  /* margin: 20px;  remove the default margin from the list */

}
.stickyarray ul {
  list-style-type: none; /* remove the bullets from the list */
  margin: 0px; /* remove the default margin from the list */
  padding: 0; /* remove the default padding from the list */
}
.stickyarray ul li {
  display: inline-block; /* make the list items display horizontally */

border: 1px solid black;
padding: 8px 4px 8px 4px;
}

.stickyarray ul li a {
  color:  white; /* set the color of the links text*/
  text-decoration: none; /* remove the underline from the links */
  padding: 2px 10px; /* add some space around the links */
}

.stickyarray ul li a:hover {
  background-color: #04AA6D; /* change the background color of the links on hover */
}
/* To position the first three items on the far left and the last two items on the far right of the menu bar, you can add the following CSS code: */
.array ul li:nth-child(-n+3) {
  float: left;
}

.stickyarray ul li:nth-last-child(-n+1) {
  float: right;
}

/* ---------------------- */

.array ul {
  list-style-type: none; /* remove the bullets from the list */
  margin: 0px; /* remove the default margin from the list */
  padding: 0; /* remove the default padding from the list */
}

.array ul li {
  display: inline-block; /* make the list items display horizontally */

border: 1px solid black;
padding: 8px 4px 8px 4px;
}

.array ul li a {
  color:  white; /* set the color of the links text*/
  text-decoration: none; /* remove the underline from the links */
  padding: 2px 10px; /* add some space around the links */
}

.array ul li a:hover {
  background-color: #04AA6D; /* change the background color of the links on hover */
}
/* To position the first three items on the far left and the last two items on the far right of the menu bar, you can add the following CSS code: */
.array ul li:nth-child(-n+3) {
  float: left;
}

.array ul li:nth-last-child(-n+1) {
  float: right;
}