1

Topic: I can not display the submenu of the horizontal menu

In div "nav" (navigation the panel) is the submenu which is hidden at site loading (top:-9999em;) but it is not displayed at mouse inductions on a menu element.
I write:

.nav_main_ul li a:hover.submenu {
top:150;
}

But it is not deduced. All correctly worked until yet did not start to apply flexbox.
HTML

<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Hello World </title>
</head>
<body>
<div id = "header">
<div id = "nav">
<ul class = "nav_main_ul">
<li> <a href = ""> Main </a>
<ul class = "submenu">
<li> <a href = "#"> link 1 </a> </li>
<li> <a href = "#"> link 2 </a> </li>
<li> <a href = "#"> link 3 </a> </li>
<li> <a href = "#"> link 4 </a> </li>
</ul>
</li>
<li> <a href = "#"> News </a>
<ul class = "submenu">
<li> <a href = "#"> link 5 </a> </li>
<li> <a href = "#"> link 6 </a> </li>
<li> <a href = "#"> link 7 </a> </li>
<li> <a href = "#"> link 8 </a> </li>
</ul>
</li>
<li> <a href = "#"> About us </a>
<ul class = "submenu">
<li> <a href = "#"> link 5 </a> </li>
<li> <a href = "#"> link 6 </a> </li>
<li> <a href = "#"> link 7 </a> </li>
<li> <a href = "#"> link 8 </a> </li>
<li> <a href = "#"> link 9 </a> </li>
<li> <a href = "#"> link 10 </a> </li>
</ul>
</li>
<li> <a href = "#"> Gallery </a>
<ul class = "submenu">
<li> <a href = "#"> link 5 </a> </li>
<li> <a href = "#"> link 6 </a> </li>
<li> <a href = "#"> link 7 </a> </li>
<li> <a href = "#"> link 8 </a> </li>
<li> <a href = "#"> link 9 </a> </li>
<li> <a href = "#"> link 10 </a> </li>
</ul>
</li>
<li> <a href = "#"> Contacts </a>
<ul class = "submenu">
<li> <a href = "#"> link 5 </a> </li>
<li> <a href = "#"> link 6 </a> </li>
<li> <a href = "#"> link 7 </a> </li>
<li> <a href = "#"> link 8 </a> </li>
<li> <a href = "#"> link 9 </a> </li>
<li> <a href = "#"> link 10 </a> </li>
</ul>
</li>
</ul>
</div>
<div id = "wrapper">
<div id = "sidebar"> </div>
<div id = "content-wrapper">
<div id = "content"> </div>
<div id = "footer"> </div>
</div>
</div>
</body>
</html>

CSS

* {
margin: 0;
padding: 0;
list-style:none;
}
html, body {
height: 100 %;
}
#header {
left:0; top:0;
height:70px;
width:100 %;
background:yellow;
}
#wrapper {
display: flex;
}
#content-wrapper {
display: flex;
flex-direction: column;
min-height: 1000px;
flex-grow: 1;
}
#sidebar {
width: 200px;
background-color:#00004d;
border: 1px solid black;
box-sizing: border-box;
}
#content {
background:white;
}
#footer {
background-color: yellow;
margin-top: auto;
min-height: 100px;
}
#nav {
left:0; top:120px;
background-color: #00004d;
width: 100 %;
}
.nav_main_ul {
position:relative;
margin: 0px 0 0 400px;
}
#nav ul {
height:50px;
list-style:none;
background-color: #00004d;
}
#nav li {
display:block;
float:left;
font-family:Arial, sans-serif;
font-size:20px;
position:relative;
}
#nav li a {
color:#fff;
display:block;
height:50px;
padding:0 10px;
text-decoration:none;
line-height:50px;
}
.nav_main_ul li a:hover {
background:#000080;
}
.nav_main_ul li a:hover.submenu {
top:20em;
}
.submenu {
position:absolute;
width:250px;
top:-9999em;
}
.submenu li {
width:100 %;
height:40px;
background:#00004d;
}
.submenu li a {
line-height:50px;
height:50px;
transition: background 0.5s;
}
.submenu li a:hover {
background-color:red;
}
li:hover.submenu li {
display:block;
z-index: 100;
}