ul {
  padding: 0;
  position: relative;
  left: -5em;
  top: 7em;
  width: 10em;
  height: 10em;
  border-radius: 100%;
}

ul li {
  position: absolute;
  list-style: none;
  width: 10em;
  height: 10em;
  color: rgb(255, 255, 255);
  box-shadow: 0 0 0 1px;
  transition: all 0.3s ease;
}

ul li:nth-child(1) {
  top: 0;
  left: 0;
  border-top-left-radius: 100%;
}

ul li:nth-child(2) {
  top: 0em;
  left: 10em;
  border-top-right-radius: 100%;
}

ul li:nth-child(3) {
  top: 10em;
  left: 0;
  border-bottom-left-radius: 100%;
}

ul li:nth-child(4) {
  top: 10em;
  left: 10em;
  border-bottom-right-radius: 100%;
}

ul li:nth-child(1):hover {
  background-color: rgba(0, 0, 0, 0.15);
}

ul li:nth-child(2):hover {
  background-color: rgba(0, 0, 0, 0.15);
}

ul li:nth-child(3):hover {
  background-color: rgba(0, 0, 0, 0.15);
}

ul li:nth-child(4):hover {
  background-color: rgba(0, 0, 0, 0.15);
}

ul li:hover span {
  color: rgb(141, 141, 141);
}

span {
  position: relative;
  color: rgb(51, 51, 51);
}

#a1 {
  left: 50%;
  top: 0%;
}

ul li:nth-child(1) {
  background: url("../../___Ingredients__/__Icons_/Gallery.png") 70% 70% no-repeat;
  background-size: 40%;
  background-color: rgba(0, 0, 0, 0.55);
}

ul li:nth-child(2) {
  background: url("../../___Ingredients__/__Icons_/Videos.png") 30% 70% no-repeat;
  background-size: 40%;
  background-color: rgba(0, 0, 0, 0.55);
}

ul li:nth-child(3) {
  background: url("../../___Ingredients__/__Icons_/Downloads.png") 85% 20% no-repeat;
  background-size: 60%;
  background-color: rgba(0, 0, 0, 0.55);
}

ul li:nth-child(4) {
  background: url("../../___Ingredients__/__Icons_/Login.png") 35% 30% no-repeat;
  background-size: 45%;
  background-color: rgba(0, 0, 0, 0.55);
}