CODEWITHSUNDEEP
htmlcsscss-selectors
Amir Cahyadi
Amir Cahyadi

Reputation: 15

contact us disappears when the class above it opens

before part&accecories open after part&accecories open

code :Html Css

    
.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>

Upvotes: 0

Views: 27

Answers (1)

John
John

Reputation: 5335

Add this to your CSS:

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

Upvotes: 1

Related Questions