问悬停时无法显示水平菜单的子菜单

EN

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

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

html,
body {
  height: 100%;
}

#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:50;
    }*/

.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;
}

<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>