Au-dessus de HTML, un CSS approprié est nécessaire pour que les liens déroulants soient centraux mais en retrait.

<div class="header-dropdown-menu">
      <ul class="top-nav">
          <li class="top-menu-nav"><a href="#">Menu</a>
            <ul class="sub-nav">
              <li><a href="#">wood Type</a></li>
              <li><a href="#">News</a></li>
              <li><a href="#">Specification</a></li>
              <li><a href="#">Pricing</a></li>
              <li><a href="#">Images</a></li>
              <li><a href="#">FAQ</a></li>
            </ul>
          </li>
        </ul>
      </div> 
-1
Peter Rae 7 nov. 2019 à 01:16

2 réponses

Cela pourrait être fait en utilisant la propriété position -

Définissez le parent en position relative (cela crée le conteneur pour les éléments enfants), définissez la position de l'élément enfant en absolu. Vous pouvez maintenant dicter en utilisant les propriétés haut / gauche / bas / droite où vous voulez placer l'élément - Gardez à l'esprit que le point central des éléments sera par défaut placé en haut à gauche - cela signifie que vous devrez transformer le éléments par -50% (en haut et à gauche) pour les centrer - Exemple ci-dessous:

li.top-menu-nav {
    position: relative;
    width: 100%;
}

ul.sub-nav {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

Veuillez garder à l'esprit si vous souhaitez centrer les LI que vous devez ajouter -

ul.sub-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 50%);
}

Notez également que la hauteur vers laquelle l'enfant (li dans ce cas) peut être déplacé dépendra de la hauteur de l'élément parent, en donnant à votre top-menu-nav un height:100vh permettra au menu d'être placé dans au centre de la page.

J'espère que cela aide, Wally

0
Wally 6 nov. 2019 à 22:38

Si mon interprétation est correcte, vous pouvez faire quelque chose comme ceci:

.header-dropdown-menu {
  position: relative;
  display: inline-block;
}

.sub-nav {
  display: none;
  text-align: center;
  position: absolute;
  min-width: 8rem;
  box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.2);
  padding: 1rem 1.5rem;
  z-index: 1;
}

.sub-nav {
  padding-left: 5rem;
}

.top-menu-nav:hover .sub-nav {
  display: block;
}
<div class="header-dropdown-menu">
  <ul class="top-nav">
    <li class="top-menu-nav"><a href="#">Menu</a>
      <ul class="sub-nav">
        <li><a href="#">wood Type</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Specification</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Images</a></li>
        <li><a href="#">FAQ</a></li>
      </ul>
    </li>
  </ul>
</div>
0
sean.hlavac 6 nov. 2019 à 22:46