<ul class="float-menu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

body {
  font-family: sans-serif;
  line-height: 1;
}

.float-menu {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.float-menu li {
  position: relative;
  overflow: hidden;
}

.float-menu li:after {
  content: '';
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  background: #CCC;
  border-radius: 50%;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 0.5s;
}

.float-menu li a {
  display: block;
  text-decoration: none;
  padding: 5px 20px 5px 10px;
  transform: translateX(100%);
  transition: all 0.5s;
  color: #CCC;
  opacity: 0;
}

.float-menu li:hover a {
  transform: translateX(0);
  opacity: 1;
  color: #000;
}

.float-menu li:hover:after {
  background-color: #000;
}