body {margin: 0; font-family: sans-serif;}

#header {
    background-color: #efefef;
    height: 100px;
    font-size: 0;
}

.link {
    background-color: yellow;
    display: inline-block;
    width: 20%; height: 100%;
    text-align: center; font-size: 40px; font-weight: bold; line-height: 100px;
    
}

a {
    background-color: orange;
    display: inline-block;
    width: 100%; height: calc(100% - 10px);
    border-bottom: 10px solid #bfbfbf; text-decoration: none;
}

#one {
    background-color: #ff4f4f; color: #8f0000;
    border-bottom: 10px solid #8f0000;
} #one:hover {
    background-color: #8f0000; color: #ffffff;
}

#two {
    background-color: #ff8f00; color: #8f4f00;
    border-bottom: 10px solid #8f4f00;
} #two:hover {
    background-color: #8f4f00; color: #ffffff;
}

#three {
    background-color: #6fff00; color: #008f00;
    border-bottom: 10px solid #008f00;
} #three:hover {
    background-color: #008f00; color: #ffffff;
}

#four {
    background-color: #4f8fff; color: #006f8f;
    border-bottom: 10px solid #006f8f;
} #four:hover {
    background-color: #006f8f; color: #ffffff;
}

#five {
    background-color: #af4fff; color: #4f4f8f;
    border-bottom: 10px solid #4f4f8f;
} #five:hover {
    background-color: #4f4f8f; color: #ffffff;
}