Submenu keep hiding on moving mouse from menu to submenu - html

Question

Whenever I move my mouse to submenu, the list disappears suddenly.
I tried using z-index also, but it's not working. Most probably there is some other element overlapping my navigation menu.
here is Code Snippet for menu part:-
.nav {
background: url(images/bgnav.jpg);
clear: both;
height: 40px;
font-size:11px;
text-shadow:0 1px 1px #fff;
line-height: 40px;
}
.nav li {
float: left;
list-style-type: none;
text-transform:uppercase;
}
.nav li a {
color: #676767;
text-decoration: none;
padding:10px 8px;
}
.nav li:hover {
color: #fff;
text-decoration: none;
background:url(images/nav-hover.png);
text-shadow:0 1px 1px #000;
}
.nav li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.nav li:hover ul {
display: block;
position: absolute;
transition-delay: 0s;
}
.nav li ul li {
background: url(images/bgnav.jpg);
}
.nav li ul li a:hover {
background:url(images/nav-hover.png);
}
.submenu li{
transition: 0.2s 1s;
text-shadow:0 1px 1px #fff;
}
<div class="nav">
<div class="mainbody"><!-- #BeginLibraryItem "/Library/nav.lbi" --><ul>
<li>Home </li>
<li>About us</li>
<li>Company Profile</li>
<li>Babbitt Bearing Manufacturing</li>
<li>Rebabbitt Bearing
<ul class="submenu">
<li>White Bearing</li>
</ul>
</li>
<li> Quality</li>
<li> Reverse Engineering</li>
<li> in Situ Services</li>
<li> Contact us </li>
</ul><!-- #EndLibraryItem --></div>
</div>
Can anybody tell me what should I do to solve my problem?
Thank You

Answer 1

Try following css it's overlapping with your absshadow block apply z-index along with position property
This will solve your issue
.nav li {
float: left;
list-style-type: none;
text-transform: uppercase;
/* padding-bottom: 10px; */
z-index: 999;
position: relative;
}
I hope this will solve your problem