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

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 块重叠应用 z-index 以及 position 属性这将解决您的问题

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

希望这能解决您的问题

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

Submenu keep hiding on moving mouse from menu to submenu

html

css

submenu

mousehover