Fixed Dropdown Menu - html

Question

I have a problem when my mouse hovering the dropdown menu, the dropdown container is gone. And also the menu dropdown is not steady. How can I fixed this? Please help me. Thanks a lot.
This is the 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>Home
<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>Product
<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>Contact
</ul>
<ul>About Us
</ul>
</div>
<div class="line-nav">
<img src="http://www.iconsdb.com/icons/preview/caribbean-blue/square-xxl.png" />
</div>
</div>