HTML/CSS MS Word style navigation ribbon

I made a MS Word style ribbon header, but it all seems very hacky, and I'm not really sure how to simplify it to something more reasonable. Rolling over one of the navigation icons changes the related z-index to positive revealing it. Then, on hover it changes its own z-index to remain positive keeping it up even when the mouse is no longer on the icon. If there is a better way to do this, or some way to simplify the html, I would love to hear it.

On a website

Jsfiddle:



`body {
margin:0;
background-color:#E8E8E8;
}

.stripe {
height:1.5em;
background-color:#4A4A4A;
}

header {
background-color:#D5D5D5;
}

.banner {
border-top:0.5em solid black;
border-bottom:0.5em solid black;
height:7em;
display:flex;
flex-direction:row;
justify-content:flex-start;
align-items:center;
}

#logo {
padding-left:3em;
height:60px;
width:240px;
}

#slogan {
font-family: 'Contrail One', cursive;
font-size:2em;
padding-left:5%;
margin-left:1em;
font-weight:bold;
}

nav {
background-color:#4A4A4A;
margin:0;
width:100%;
height:2em;
text-align:center;
display: flex;
flex-direction:row;
justify-content: space-between;
align-items:center;
}

.navItem {
font-family: 'Contrail One', cursive;
color:white;
padding:0.5em;
height:2em;
display:flex;
flex-direction:column;
justify-content:center;
flex-grow:1;
}

.spacer {
padding:1.5em;
flex-grow:1;
}

.navItem:hover {
height:2em;
padding-top:0.5em;
padding-bottom:0;
padding-left:0;
padding-right:0;
border-top:0;
border-bottom:.5em solid black;
border-left:.5em solid black;
border-right:.5em solid black;
background-color:#D5D5D5;
color:black;
}

.navItem:active {
background-color:#E8E8E8;
}

.itemContentsContainer {
background-color:transparent;
position:absolute;
height:7.2em;
width:100%;
top:1.75em;
left:0%;
z-index:-1;
}

#fauxgo {
margin-left:3em;
width:240px;
}

.itemContents {
height:7em;
display:flex;
flex-direction:row;
justify-content:flex-start;
align-items:center;
p

Validation

The markup has validation errors (duplicate IDs, stray starting tags caused by improperly nested elements).

Overqualification

If you're using IDs, you don't need to attach the class to the selector unless you need to increase the specificity.

.navItem#Homepage:hover ~ .itemContentsContainer#HomepageContents{
    z-index:1;
}

.navItem#Weblog:hover ~ .itemContentsContainer#WeblogContents{
    z-index:1;
}
.navItem#Projects:hover ~ .itemContentsContainer#ProjectsContents{
    z-index:1;
}
.navItem#KidsKorner:hover ~ .itemContentsContainer#KidsKornerContents{
    z-index:1;
}

Simplifies to

#Homepage:hover ~ #HomepageContents{
    z-index:1;
}

#Weblog:hover ~ #WeblogContents{
    z-index:1;
}
#Projects:hover ~ #ProjectsContents{
    z-index:1;
}
#KidsKorner:hover ~ #KidsKornerContents{
    z-index:1;
}

This doesn't actually matter because...

Holy excessive markup

The amount of markup you have here is astonishing, and not in a good way. You've got spacer divs and everything, I haven't seen that since the table layout days.

Your markup can be simplified to this:

    
        Homepage
        Sure is a homepage, alright

        Weblog
        Looks suspiciously like a weblog

        Projects
        Project stuff here

        Kid's Korner
        For the younglings
    

You can get the same appearance by drastically simplifying the CSS, too (I've gutted some of the styles to make it simpler to test this, you can add back in flexbox and some of that other stuff):

nav {
    background-color:#4A4A4A;
    margin:0;
    width:100%;
    height:2em;
    text-align:center;
    font-family: 'Contrail One', cursive;
    color:white;
}

dl {
    margin: 0;
}

dt {
    padding:0.5em;
    height:2em;
    display: inline-block;
}

dt:hover {
    height:2em;
    padding:0.5em 0 0 0;
    border:.5em solid;
    border-top:0;
    background-color:#D5D5D5;
    color:black;
    margin-top: -1em; /* border-width + your finished padding */
    padding-top: 1em;
}

dt:active {
    background-color:#E8E8E8;
}

dd {
    display: none;
}

dt:hover + dd {
    display: block;
    position: absolute;
    top: 50px; /* number picked at random */
    right: 0;
    z-index: 1
}

StackExchange Code Review Q#92192, answer score: 6