<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex {
width: 400px;
height: 80px;
line-height: 80px;
background-color: #eeeeee;
position: absolute;
top: 15%;
left: 40%;
margin: -25px 0 0 -150px;
}
.flex ul {
display: flex;
padding: 0;
margin: 0;
box-shadow: 0 10px 20px 0 #cccccc;
}
.flex ul li {
flex: 1;
list-style: none;
text-align: center;
position: relative;
font-size: 20px;
font-weight: bold;
transition: 0.3s ease;
cursor: pointer;
user-select: none;
}
.flex ul li:hover {
background-color: rgba(255, 255, 255, 0.25);
color: #65bcc9;
}