Подменю продолжает скрываться при перемещении мыши из меню в подменю

Всякий раз, когда я перемещаю мышь в подменю, список внезапно исчезает.

Я также пытался использовать 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>

Может ли кто-нибудь сказать мне, что я должен сделать, чтобы решить мою проблему?

Спасибо


html css submenu mousehover
person kleash    schedule 12.12.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте следовать css, он перекрывается с вашим блоком absshadow, примените z-index вместе со свойством position. Это решит вашу проблему.

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

Я надеюсь, что это решит вашу проблему

person ganesh satpute    schedule 12.12.2015
comment
Спасибо за решение. Это решило мою проблему. - person kleash; 12.12.2015