固定下拉菜单

Question

当鼠标悬停在下拉菜单中时，我遇到问题，下拉容器已消失。菜单下拉菜单也不稳定。我该如何解决这个问题？请帮我。非常感谢。 这是JSfiddle。

.nav-bar {
  position: fixed;
  height: 30px;
  top: 50px;
  width: 100%;
  background: #D9D9D9;
  font-size: 13px;
  color: #727272;
}
.line-nav img {
  left: -50%;
  top: 80px;
  width: 150%;
  height: 5px;
  position: fixed;
}
#menu ul {
  float: left;
  margin: 7px 0 0 -20px;
  font-weight: bold;
  list-style: none;
  display: inline;
}
#menu ul a {
  text-decoration: none;
  color: #727272;
  padding-top: 0;
}
#menu ul a:hover {
  color: #F4851E;
}
/* Dropdown Menu */
.dropdown_3columns {
  margin: 5px auto;
  float: left;
  position: absolute;
  left: -999em;
  /* Hides the drop down */
  text-align: left;
  padding: 10px 5px 10px 5px;
  border: 1px solid #777777;
  border-top: none;
  /* Gradient background */
  background: #F4F4F4;
  background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
  /* Rounded Corners */
  -moz-border-radius: 0px 5px 5px 5px;
  -webkit-border-radius: 0px 5px 5px 5px;
  border-radius: 0px 5px 5px 5px;
}
.dropdown_3columns {
  width: 420px;
}
#menu ul:hover .dropdown_3columns {
  left: -1px;
  top: 25px;
}
/* Columns */
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 5px;
  margin-right: 5px;
}
.col_1 {
  width: 130px;
}
.col_2 {
  width: 270px;
}
.col_3 {
  width: 410px;
}
.col_4 {
  width: 550px;
}
.col_5 {
  width: 690px;
}
/* Right alignment */
#menu .menu_right {
  float: right;
  margin-right: 0px;
}
#menu ul .align_right {
  /* Rounded Corners */
  -moz-border-radius: 5px 0px 5px 5px;
  -webkit-border-radius: 5px 0px 5px 5px;
  border-radius: 5px 0px 5px 5px;
}
#menu ul:hover .align_right {
  left: auto;
  right: -1px;
  top: auto;
}
/* Drop Down Content Stylings */
#menu p,
#menu h2,
#menu h3,
#menu ul ul {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 21px;
  font-size: 12px;
  text-align: left;
  text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -1px;
  margin: 7px 0 14px 0;
  padding-bottom: 14px;
  border-bottom: 1px solid #666666;
}
#menu h3 {
  font-size: 14px;
  margin: 7px 0 14px 0;
  padding-bottom: 7px;
  border-bottom: 1px solid #888888;
}
#menu p {
  line-height: 18px;
  margin: 0 0 10px 0;
}
#menu ul:hover div a {
  font-size: 12px;
  color: #015b86;
}
#menu ul:hover div a:hover {
  color: #029feb;
}

<div class="nav-bar">
  <div id="menu">
    <ul><a href="#" class="drop">Home</a>

      <div class="dropdown_3columns">
        <!-- Begin 2 columns container -->
        <div class="col_2">
          <h2>Welcome !</h2>

        </div>
        <div class="col_2">
          <p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>
          <p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>
        </div>
      </div>
      <!-- End 2 columns container -->
    </ul>
    <ul><a href="#">Product</a>

      <div class="dropdown_3columns">
        <!-- Begin 2 columns container -->
        <div class="col_2">Contain Product</div>
        <div class="col_1">Contain Product</div>
        <div class="col_2">Contain Product</div>
      </div>
      <!-- End 2 columns container -->
    </ul>
    <ul><a href="#">Contact</a>

    </ul>
    <ul><a href="#">About Us</a>

    </ul>
  </div>
  <div class="line-nav">
    <img src="http://www.iconsdb.com/icons/preview/caribbean-blue/square-xxl.png" />
  </div>
</div>