Apply z-index to make menu always on top

HTML

<div class="header">Header Area
    <div class="menu">Menu Area</div>
</div>
<div class="banner">Banner</div>

CSS

div {
    display: block;
    position: relative;
    height: 100px;
    width: 100px;
}
.header {
    z-index: 10;
    width: 100%;
    background-color: rgba(255, 0, 0, 0.5) !important;
}
.menu {
    background-color: rgba(0, 255, 0, 0.5);
    margin-top: 20px;
    margin-left: auto;
    margin-right: 5%;
    height: 300px;
    z-index: 5;
}
.banner {
    background-color: rgba(0, 0, 255, 0.8);
    margin-top -10px;
    width: 100%;
    z-index:10;
}