当上面的课程打开时,联系我们就消失了



在part&加速器打开在零件&加速打开

代码:HtmlCss


.nav-link .drop-menu{
position: relative;
top: 0;
background: #242526;
width: 100%;
top: 0;
opacity: 1;
visibility: visible;
border: none;
background: #000;
padding-left: 10px;
display: none; 
}
.nav-link .mega-box{
left: 0;
top: 0;
position: static;
display: block;
opacity: 1;
visibility: visible;
transition: all 0.3s ease;
border: none;
padding-left: 10px;
display: none;
}
.mega-box .mega-links{
border-left: none;
}
.nav-link li:hover .drop-menu,
.nav-link li:hover .mega-box{
top: 0px;
}
.drop-menu.open{
display: block;
}

.mega-box.open{
display: block;
}
<li class="two"><a href="#">Part & Accecories</a>
<ul class="mega-box">
<ul class="mega-links">
<img src="gambar/photo.jpg" alt="photo">
</ul>
<ul class="mega-links">
<header>AmirCahyadi</header> 
<div class="megalinks"> 
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</div>
</ul> 
<ul class="mega-links">
<header>AmirCahyadi</header>
<div class="megalinks">
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</div>
</ul>
<ul class="mega-links">
<header>AmirCahyadi</header>
<div class="megalinks">
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</div>
</ul>
</ul>
</li>
<li><a href="#">Contact Us</a></li>

将其添加到您的CSS:

.nav-link > li:last-of-type {
margin-bottom: 20%;
}

最新更新