CSS3 HandsOn - Menu Bar - Create a CSS menu bar as shown in the image above. HackerRank Fresco Play

Create a CSS menu bar as shown in the image above. 

All the content divs should be hidden at first and when the menu button (Home, Contact, About) is clicked the corresponding div should be visible. 

Please try to recreate the above thing as similar as possible.

Answer:

Style.css

.menu {

height: 24%;

width: 600px;

margin: auto;

border: 1px solid RGBA(0,0,0,.4);

font-family: calibri, monospace;

}

.button{

width: 150px;

height: 32%;

background: #333;

border:1px solid white;

color: #e7e7e7;

font-weight: 600;

display: flex;

cursor:pointer;

align-items:center;

justify-content:center;

}

.button:focus, .button:hover {

background: blue;

}

.button:focus + .content{

display: block;

}

.content{

background: #f3f3f3;

width: 440px;

height: 23%;

margin-left: 155px;

border: 1px solid #e7e7e7;

display: none;

position:absolute;

align-items:center;

justify-content:center;

}

html{

width: 100%;

height: 100%;

display: flex;

}

body{

display: flex;

margin: auto;

}

Click on the image to see in full view: