<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

<h2>Пример №1</h2>

<div class="menu">
  <ul>
    <li><a href="#"><i class="fas fa-home"></i></a></li>
    <li><a href="#"><i class="fas fa-envelope"></i></a></li>
    <li><a href="#"><i class="fas fa-map-marker-alt"></i></a></li>
  </ul>
</div>

<h2>Пример №2</h2>

<div class="menu2">
  <ul>
    <li><a href="#"><i class="fas fa-home"></i></a></li>
    <li><a href="#"><i class="fas fa-envelope"></i></a></li>
    <li><a href="#"><i class="fas fa-map-marker-alt"></i></a></li>
  </ul>
</div>
/*Пример №1*/
.menu {
  width:100%;
  overflow:hidden;
  background:#003595;
}
.menu ul {
  margin-top: -1px;
}
.menu li {
  list-style:none;
  float:left;
}
.menu li a {
  color:#fff;
  width:40px;
  display:block;
  padding:20px 0;
  transition:0.5s ease-in-out;
}
.menu li a:hover {
  color:yellow;
}
.menu li:nth-child(1)::before {
  content: "Главная";
  color:#fff;
  background: darkorange;
  padding:0.7%;
  border-radius:2px;
  position:absolute;
  left:30px;
  top:100px;
  opacity:0;
  visibility:hidden;
  transition:0.5s ease;
}
.menu li:nth-child(1):hover::before {
  top:50px;
  opacity:1;
  visibility:visible;
}
.menu li:nth-child(2)::before {
  content: "e-mail";
  color:#fff;
  background: darkorange;
  padding:0.7%;
  border-radius:2px;
  position:absolute;
  left:70px;
  top:100px;
  opacity:0;
  visibility:hidden;
  transition:0.5s ease;
}
.menu li:nth-child(2):hover::before {
  top:50px;
  opacity:1;
  visibility:visible;
}
.menu li:nth-child(3)::before {
  content: "Адрес";
  color:#fff;
  background: darkorange;
  padding:0.7%;
  border-radius:2px;
  position:absolute;
  left:105px;
  top:100px;
  opacity:0;
  visibility:hidden;
  transition:0.5s ease;
}
.menu li:nth-child(3):hover::before {
  top:50px;
  opacity:1;
  visibility:visible;
}
/*Пример №1*/

/*Пример №2*/
.menu2 {
  width:120px;
  background: #2a2a2a;
}
.menu2 ul {
  margin-left:-39px;
}
.menu2 ul li {
  list-style:none;
  border-bottom:1px solid #fff;
}
.menu2 ul li a {
  width:118px;
  display:block;
  padding:20px 30px;
  color:#fff;
  text-align:left;
  transition:0.5s ease;
}
.menu2 ul li a:hover {
  background:#484848;
  padding:20px 10px;
}
.menu2 ul li:nth-child(3) {
  border:none;
}
.menu2 ul li:nth-child(1)::after {
  content: "Главная";
  color:#fff;
  padding:0.7%;
  border-radius:2px;
  position:absolute;
  left:200px;
  top:195px;
  visibility:hidden;
  opacity:0;
  transition:0.5s ease;
}
.menu2 ul li:nth-child(1):hover::after {
  left:70px;
  top:195px;
  visibility:visible;
  opacity:1;
}
.menu2 ul li:nth-child(2)::after {
  content: "e-mail";
  color:#fff;
  padding:0.7%;
  border-radius:2px;
  position:absolute;
  left:200px;
  top:250px;
  visibility:hidden;
  opacity:0;
  transition:0.5s ease;
}
.menu2 ul li:nth-child(2):hover::after {
  left:70px;
  top:250px;
  visibility:visible;
  opacity:1;
}
.menu2 ul li:nth-child(3)::after {
  content: "Адрес";
  color:#fff;
  padding:0.7%;
  border-radius:2px;
  position:absolute;
  left:200px;
  top:310px;
  visibility:hidden;
  opacity:0;
  transition:0.5s ease;
}
.menu2 ul li:nth-child(3):hover::after {
  left:70px;
  top:310px;
  visibility:visible;
  opacity:1;
}
/*Пример №2*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.