POC Menu Botanic

by oilvier

HTML

<nav>
  <ul class="foo">
    <li><a href="#">Nos produits</a>
      <ul class="bar">
        <li><a href="#">Plantes et fleurs</a></li>
        <li><a href="#">Potager et verger</a></li>
        <li><a href="#">Aménagement de jardin</a></li>
        <li><a href="#">Matériel et entretien du jardin</a>
        <div class="baz">
          <ul>
            <li><a href="#">Outils de jardinage</a>
            </li>
            <li><a href="#">Entretien du jardin</a></li>
            <li><a href="#">Matériel de jardinage</a></li>
            <li>...</li>
          </ul>
        </div>
        </li>
        <li><a href="#">Décoration intérieure</a></li>
        <li><a href="#">Animalerie</a></li>
        <li><a href="#">Alimentation bio</a></li>
        <li><a href="#">Bien-être, santé et hygiène</a></li>
      </ul>
    </li>
    <li><a href="#">Offres du moment</a></li>
    <li><a href="#">Conseils & inspirations</a></li>
    <li><a href="#">Services & rendez-vous</a></li>
    <li><a href="#">Noël</a></li>
  </ul>
</nav>

SCSS

nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
}

.foo,
.bar {
  @media (min-width: 600px) {
    display: flex;
  }
}

.foo {
  position: relative;
  
  > li {
    padding: 10px;
  }
  
  > li:first-child {
    background-color: lightgreen;
  }
}

.bar {
  display: none;
  
  @media (min-width: 600px) {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    background-color: lightgreen;
   }
  
  > li {
    padding: 10px;
    
    &:hover {
      background-color: lightblue;
      
      .baz {
        display: block;
      } 
    }
  }
}

.baz {
  display: none;
  
  @media (min-width: 600px) {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: lightblue;
    padding: 20px;
  }
}