<div class="main-menu-div">
<span class="main-menu">Pedidos </span>
<span class="main-menu">Pedidos </span>
<span class="main-menu">Pedidos </span>
<span class="main-menu">Pedidos </span>

</div>

<body>
  <span class="hovertext" data-hover="Hello, this is the tooltip">
    Try hover over me
  </span>
</body>
BODY {
  height: 100vh;
  background: #f77754;
  letter-spacing: 0.1em;  
}

#main-menu-container{
  width: 100%;
  min-height: 500px;
  height: auto;
  background-color: #2185C5;
  #position: absolute;
}

.main-menu-div{
  text-align: center;

  height: 2em;
  border: 1px solid green;  
  padding: 10px;

  width: 100%;
}

.main-menu {
  font-family: Baskerville;
  font-size: 20px;
  font-style: normal;
  font-variant: normal;
  font-weight: 700;
  line-height: 27.5px;
  padding-left:1em;
  padding-right:1em;
  #display: table-cell;
  #vertical-align: top;
  #align-items: center; 
  #text-align: center;

  position: relative;
  z-index: 0;  
  transition: 0.2s color;
}

.main-menu:hover {
    color: #fff;
  }

.main-menu::before {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #0a516d;
    transform: scaleX(0);
    transform-origin: right;
    transition: 0.3s transform ease-in-out;
  }

.main-menu:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.