Bonjour,

J'aimerais centrer les sous menus sous le nav.

Qq peut m'aider svp ?

Merci d'avance et bonne journée,

<header>
	<div id="en_tete">
  	<a href="#">
          <img id="logo" src="images/logoGN9_Bleu.png" alt="Logo de la Team Goutanous"/>
          <h1>team <br/>
      	goutanous</h1>
  	</a>
  </div>
  <nav>
		<div id="menu">
      <ul>
        <li><a href="index.php" class="onglets" >ACCUEIL</a></li>
        <li><a href="#" class="onglets" >PRESENTATION</a>
          <ul>
            <li><a href="rapide.php">RAPIDE</a></li>
            <li><a href="activites.php">ACTIVITES</a></li>
          </ul>
        </li>
        <li><a href="#" class="onglets" >COMPETITION</a>
          <ul>
              <li><a href="rainbow_6_siege.php">RAINBOW 6 SIEGE</a></li>
              <li><a href="#">ROCKET LEAGUE</a></li>
          </ul>
        </li>
        <li><a href="#" class="onglets" >TEST</a>
          <ul>
              <li><a href="#">TEST</a></li>
              <li><a href="#">TEST</a></li>
          </ul>
        </li>
        <li><a href="#" class="onglets" >MON COMPTE</a>
          <ul>
            <?php if(isset($_SESSION['nickname']) && !empty($_SESSION['nickname'])) {  ?>

              <li><a href="logout.php">DECONNECTER</a></li>
              <li><a href="#">INFORMATIONS</a></li>

            <?php
            } else { ?>

              <li><a href="login.php">SE CONNECTER</a></li>
              <li><a href="register.php">S'INSCRIRE</a></li>

            <?php
            }
            ?>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</header>

header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#en_tete {
  height: 120px;
  margin-left: 5%;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#en_tete a {
  width: 340px;
}

h1 {
  font-variant: small-caps;
  font-size: 40px;
  font-family: 'Arial';
  font-weight: 600;
  color: #1D5981;
  line-height: 40px;
  float: right;
  margin: auto;
}

#logo {
  height: 85px;
  margin: auto;
}

/*navigation*/

#menu {
  display: flex;
}

#menu ul {
  margin: auto;
  float: right;
  padding: 0;
  list-style-type: none;
  text-align: center;
  list-style: none;
  margin-right: 80px;
}

#menu li {
  float: left;
  display: inline;
  list-style: none;
  /* nécessaire pour IE7 */
  margin-top: 30px;
  font-size: 1em;
}

#menu ul li {
  margin-left: 20px;
}

#menu ul li ul li {
  margin-left: 0px;
}

#menu .onglets {
  transition-duration: 0.25s;
  transition-property: background-color, color;
  color: #1D5981;
  padding: 15px;
  display: block;
  /*Affiche le sous-menu en position vertical*/
  text-decoration: none;
}

#menu ul li:hover .onglets {
  transition-duration: 0.25s;
  transition-property: background-color, color;
  background-color: #1D5981;
  color: white;
}

#menu li a:hover {
  color: #5FB404;
}

#menu ul li ul {
  display: none;
  background-color: white;
  padding: 15px;
  background-color: green;
}

#menu ul li:hover ul {
  display: flex;
  /*Affiche le menu dérulant*/
  flex-direction: column;
  justify-content: center;
  position: absolute;
}

Guillaume

Bonjour,

un peu de lecture : http://www.frogweb.fr/menu-deroulant-horizontal/

Bonjour Lamecarlate,

incroyable, après tout ce temps, ce site fait encore référence...

Heyyyy mais t'es toujours vivant ! Ça faisait un bail

Et sinon, oui, pour les menus déroulants, ton site est parfait : simple, clair, didactique. C'est comme l'article de rhooManu sur le sticky footer : de bonnes références que je garde sous le coude et transmets au besoin.

-
Edité par Lamecarlate 21 septembre 2017 à 13:26:51