Submenu disappears in Flexbox - css

Question

When I try to add a site navigation into a flexbox layout the submenus become not accessible anymore. They disappear when the mouse leaves the parent list element.
The final goal is to make the navigation fixed by using flexbox. If the body- and header-tag are left out the navigation works like intended. Any ideas on this?
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
header {
flex: 0 0 auto;
background: yellow;
}
.site-navigation {
font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
font-weight: 400;
color: #666;
}
nav ul {
background: none;
display: flex;
flex-direction: column;
}
nav ul li {
list-style-type: none;
background: none;
}
nav ul li:hover {
background: none;
}
nav ul li a {
padding: 0.8rem 1rem;
display: block;
text-decoration: none;
color: rgba(100, 100, 100, 0.8);
background: none;
text-transform: uppercase;
font-size: 12px;
}
.has-children:hover>a {
border: 1px solid #e5e5e5;
border-bottom: none;
background: #fff;
margin-left: -1px;
margin-right: -1px;
margin-top: -1px;
color: #000;
}
.has-children:hover>ul {
border: 1px solid #e5e5e5;
position: relative;
z-index: -1;
}
.has-children:hover>ul>li {
padding: 15px 15px;
}
.has-children>ul>li>a {
text-transform: none;
color: #666;
border-bottom: 1px solid #E5E5E5;
padding: 0;
padding-bottom: 15px;
}
.has-children>ul>li:hover>a {
border-bottom: 2px solid #d00;
color: #000;
padding-bottom: 14px;
}
#media only screen and (min-width:680px) {
nav ul {
flex-direction: row;
}
nav ul li {
position: relative;
flex: 0 0 auto;
text-align: left;
}
nav ul li:hover ul {
display: flex;
flex-direction: column;
}
.has-children ul {
display: none;
position: absolute;
top: 100%;
}
.has-children:hover ul {
display: block;
position: absolute;
top: calc( 100% - 1px);
width: 150%;
}
}
<header class="site-header">
<nav class="site-navigation">
<ul class="site-navigation__list">
<li class="site-navigation__item">Item 1
</li>
<li class="site-navigation__item has-children">Item 2<span class="arrow arrow-down"></span>
<ul class="site-navigation__sub-list">
<li class="site-navigation__sub-item">Subitem 1</li>
<li class="site-navigation__sub-item">Subitem 2</li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="content"><p>Content goes here!</p></div>

Answer 1

It seems to be a matter of z-index and background.
You may use position:relative to reset z-index and add a background to submenu to hide overlapped content.
CSS update that could be done:
nav ul {
position:relative;
z-index:1
}
nav ul li:hover > ul{
background: white;
}
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
header {
flex: 0 0 auto;
background: yellow;
}
.site-navigation {
font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
font-weight: 400;
color: #666;
}
nav ul {
background: none;
display: flex;
flex-direction: column;
}
nav ul {
position:relative;
z-index:1
}
nav ul li:hover > ul{
background: white;
}
nav ul li ,nav ul li:hover{
list-style-type: none;
background: none;
}
nav ul li a {
padding: 0.8rem 1rem;
display: block;
text-decoration: none;
color: rgba(100, 100, 100, 0.8);
background: none;
text-transform: uppercase;
font-size: 12px;
}
.has-children:hover>a {
border: 1px solid #e5e5e5;
border-bottom: none;
background: #fff;
margin-left: -1px;
margin-right: -1px;
margin-top: -1px;
color: #000;
}
.has-children:hover>ul {
border: 1px solid #e5e5e5;
position: relative;
z-index: -1;
}
.has-children:hover>ul>li {
padding: 15px 15px;
}
.has-children>ul>li>a {
text-transform: none;
color: #666;
border-bottom: 1px solid #E5E5E5;
padding: 0;
padding-bottom: 15px;
}
.has-children>ul>li:hover>a {
border-bottom: 2px solid #d00;
color: #000;
padding-bottom: 14px;
}
#media only screen and (min-width:680px) {
nav ul {
flex-direction: row;
}
nav ul li {
position: relative;
flex: 0 0 auto;
text-align: left;
}
nav ul li:hover ul {
display: flex;
flex-direction: column;
}
.has-children ul {
display: none;
position: absolute;
top: 100%;
}
.has-children:hover ul {
display: block;
position: absolute;
top: calc( 100% - 1px);
width: 150%;
}
}
<header class="site-header">
<nav class="site-navigation">
<ul class="site-navigation__list">
<li class="site-navigation__item">Item 1
</li>
<li class="site-navigation__item has-children">Item 2<span class="arrow arrow-down"></span>
<ul class="site-navigation__sub-list">
<li class="site-navigation__sub-item">Subitem 1</li>
<li class="site-navigation__sub-item">Subitem 2</li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="content"><p>Content goes here!</p></div>
Another update maybe to show submenu when parent is hovered ?
.has-children>ul {
display:none;
}
.has-children:hover>ul {
display:block;
}
https://codepen.io/anon/pen/MvKqqE