html - 子菜单一直隐藏在将鼠标从菜单移动到子菜单时

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

尝试跟随 css 它与你的 absshadow block 重叠应用 z-index 以及 position 属性这将解决您的问题

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

希望能解决你的问题