CSS Red Menu

---

HTML CODE:

<ul>
  <li><a href="#"><span title="menu">menu</span></a></li>
  <li><a href="#"><span title="about">about</span></a></li>
  <li><a href="#"><span title="service">service</span></a></li>
  <li><a href="#"><span title="contact">contact</span></a></li>
</ul>

---

CSS CODE:

body{
  padding:0;
  margin:0;
    height: 100vh;
    background: linear-gradient(45deg,#262626,black)
}

ul{
  margin:0;
  padding:0;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  list-type:none;
  display:flex
}
ul li{
  display:inline-block;
  float:left;
  padding:30px 30px;
  background-color:#fff;
  border-right:1px solid grey;
  border-left:1px solid grey;
  transition:.5s
  
}
ul li a{
  color:#262626;
  text-decoration:none;
  font-size:35px;
  text-transform:uppercase;
  position: relative;
  font-family:verdana;
  display: block;
  transition:.5s
}
ul li a:hover{
  transform:scale(1.2);
  color:#fff
}
ul li:hover{
  background:#660000;
}