子菜单一直隐藏在将鼠标从菜单移动到子菜单上

Question

每当我将鼠标移动到子菜单时，列表会突然消失。

我也试过使用z-index，但它不起作用。很可能还有一些其他元素与我的导航菜单重叠。

这是菜单部分的代码片段： -

.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><a href="index.html">Home</a> </li>
  <li><a href="about-us.html">About us</a></li>
  <li><a href="company-profile.html">Company Profile</a></li>
  <li><a href="material.html">Babbitt Bearing Manufacturing</a></li>
  <li><a href="bearing.html">Rebabbitt Bearing</a>
 <ul class="submenu">
            <li><a href="#">White Bearing</a></li>
        </ul>
</li>
  <li><a href="quality.html"> Quality</a></li>
  <li><a href="reverse-engineering.html"> Reverse Engineering</a></li>
  <li><a href="in-situ-services.html"> in Situ Services</a></li>
  <li><a href="contact-us.php"> Contact us </a></li>
          </ul><!-- #EndLibraryItem --></div>
    
</div>

有人能告诉我该怎么办才能解决我的问题吗？

谢谢

Answer 1

尝试关注与您的absshadow阻止z-index以及position属性重叠的CSS 这将解决您的问题

.nav li {
    float: left;
    list-style-type: none;
    text-transform: uppercase;
    /* padding-bottom: 10px; */
    z-index: 999;
    position: relative;
}

我希望这能解决你的问题