Submenu hides when mouse moves near it - css

Question

I am trying to make this menu item work but every time I use it, the sub menu hides. Please guide me. Thanks.
EDIT: It is the same issue as this:
CSS Space between menu and submenu
website: http://www.inspuratesystems.com/mntextile
JS Fiddle
#navmenu {
padding-top:30px;
}
.nav-header {
margin: auto;
padding: 0;
display: block;
}
#navmenu ul {
margin: 0px;
padding: 0px;
padding-left: 5px;
}
#navmenu ul li {
list-style-type: none;
display: inline-block;
position: relative;
margin-top: 0px;
padding-top: 15px;
/*
height:60px;
*/
padding-left:10px;
padding-right:10px;
}
#navmenu li a {
font-size: 13px;
color: #FFFFFF;
font-weight: 500;
font-family: 'Raleway', sans-serif;
}
#navmenu li a:hover {
font-size: 13px;
color: #f28c18;
font-weight: 500;
}
#navmenu li a:active {
color: #f28c18;
}
/* Effect 1: Brackets */
#navmenu ul {
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
margin-top: 5px;
}
#navmenu ul > li::before {
position: absolute;
bottom:65%;
left: 50%;
color: transparent;
/* Removing the balls
content: '•';
*/
/*
text-shadow: 0 0 transparent;
*/
font-size: 1.2em;
-webkit-transition: text-shadow 0.3s, color 0.3s;
-moz-transition: text-shadow 0.3s, color 0.3s;
transition: text-shadow 0.3s, color 0.3s;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
pointer-events: none;
margin-left: 5px;
background:#051449;;
}
#navmenu ul > li:hover::before,
#navmenu ul > li:focus::before {
color: #fff;
text-shadow: 10px 0 #fff, -10px 0 #fff;
}
#navmenu ul > li:hover,
#navmenu ul > li:focus {
color: #FFF;
}
#navmenu ul >li ul li::before{ display:none;}
#menu-icon {
display: none;
}
/*SUBMENU*/
#navmenu ul li ul {
position:absolute;width:140px; z-index:999999; padding-left:0; margin-left:0px; display:none;left: 10px; opacity: 0.9;}
/* old= width:120px; */
#navmenu ul li ul li {
float:none; margin:0; text-align:left; background:#FFFFFF ;
padding-right:10px;
padding-left:10px;
padding-top:-10px;
/*
padding:10px 10px;
*/
/*
padding-top:5px;
*/
display:block; border-bottom: 1px solid #333; height:auto; }
#navmenu ul li ul li:hover {
background-color: #0099CC;
}
#navmenu ul > li ul li:hover {
color: white; /* Old browsers */
background-color: #0099CC ;
}
#navmenu ul li ul li a
{ width:100%; margin:0px; display:block; color: #FFFFFF;
}
#navmenu ul li ul li a:hover
{ width:100%; margin:0px; display:block; color: #FFFFFF;
}
#navmenu ul li ul li ul {
left: 100%;
/* sub menus of sub menu's same
margin-top: -32px;
*/
margin-top: -27px;
float: none;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCC;
}
#media only screen and (max-width: 768px) {
/*MENU*/
body #menu_wrap {
width: 100%;
}
body #navmenu {
width: 100%;
text-align: center;
}
#navmenu ul li {
list-style-type: none;
display: inline-block;
position: relative;
margin-top: 0px;
padding-top: 15px;
height: auto;
padding-left:10px;
padding-right:10px;
background-color:#051449;
}
/* nav-wrap */
#menu_wrap {
position: relative;
}
/* menu icon */
#menu-icon {
padding: 10px 0px;
cursor: pointer;
font-size: 20px;
display: block!important; /* show menu icon */
}
#menu-icon:hover {
}
/* main nav */
body #navmenu ul.menu {
clear: both;
position: absolute;
top: 50px;
width: 100%;
z-index: 10000;
/*
border: solid 1px #999;
*/
display: none;
margin-top: 5px;
/*
background-color: rgb(51,51,51);
*/
background-color:#051449;
}
body #navmenu ul.menu li {
width: 100%;
clear: both;
float: none;
text-align: center;
padding-top: 6px;
padding-right: 30px;
padding-bottom: 6px;
padding-left: 0px;
/*
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
*/
}
body #navmenu ul > li:hover {
background: #051449 !important;
}
body #navmenu ul.menu li ul li {
background:#051449!important;
width: 100%;
border: none;
}
body #navmenu ul.menu li ul li:hover {
background:#051449!important;
}
body #navmenu ul.menu a, body #topmenu ul.menu ul a {
background: #051449!important;
display: inline;
padding: 0;
border: none;
}
body #navmenu ul.menu a:hover, body #topmenu ul.menu ul a:hover {
background: #051449!important;
}
/* dropdown */
body #navmenu ul.menu ul {
width: auto;
position: static;
display: block;
border: none;
background: inherit;
margin-top: 0px;
}
body #navmenu ul.menu ul li {
}
}

Answer 1

Add in the css:
#navmenu ul li ul {
margin-top: 0;
}
So the space between the elements is removed.

Answer 2

You can use it -
Demo
nav ul li {
float: left;
position:relative
}
nav ul ul {
background-color:#fff;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
margin-top:5px;
}