28112 sujets

CSS et mise en forme, CSS3

Probleme avec mon menu html css

<style>* {
  list-style: none;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.navbar {
  height: 95px;
  width: 100%;
  overflow: hidden;
  background-color: #EEB601;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar ul {
  float: right;
  margin-right: 20px;
}

.navbar ul li {
 float: left;
 display: inline-block;
 margin: 0 5px;
}

.navbar ul li a {
 color: white;
 font-size: 17px;
 padding: 7px 13px;
 border-radius: 3px;
 text-decoration: none;
 text-transform: uppercase;
}

.dropdown {
  float: left;
}

.dropdown .dropbtn {
  font-size: 17px;  
  border: none;
  outline: none;
  color: white;
  padding: 7px 13px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  top: 100px;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content .header {
  width: 100%;
  background: red;
  padding: 16px;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
}

.column li {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column li :hover {
  background-color: #ddd;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>
<nav class="navbar">
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </a>
    <li class="dropdown-content">
      <ul class="header">
        <h2>Mega Menu</h2>
      </ul>   
      <ul class="row">
        <ul class="column">
          <h3>Category 1</h3>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
        </ul>
        <ul class="column">
          <h3>Category 2</h3>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
        </ul>
        <ul class="column">
          <li><h3>Category 3</h3>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
        </ul>
      </ul>
    </ul>
  </li> 
</ul>
</nav>
</body>
</html>

Modifié par _laurent (16 Feb 2021 - 08:37)
Modérateur
Salut,

J'ai corrigé ton poste car tu avais mal placé le code dans la balise de coloration syntaxique.

Par contre tu as complètement oublié de dire bonjour et de décrire ton problème ! Smiley lol
Bonjour et désolé de na pas avoir dit un petit bonjour avant. Le problème est toujours la le méga menu ne se cache pas je le vois et je veux que quand ont passe la souris sur dropdown le menu apparaisse en dessous plein écran mais j essaye depuis quelques jours et toujours pas trouver merci pour votre aide très apprécier
Modérateur
Salut !

Alors déjà ton DOM c'est un peu le bazar... dans un <ul> il faut des <li> et c'est tout. donc il te manque plein de <li> autour des <a> <h> et <ul> et de <ul> il faut commencer par corriger tout ça.

dereck1979 a écrit :
le méga menu ne se cache pas je le vois

Si tu regardes l'inspecteur de code (indispensable pour debuguer) tu verras que :
.navbar ul li {
    display: inline-block;
}

prend l'avantage sur
.dropdown-content {
    display: none;
}

a cause du poid de son sélecteur. Il faut que tu les retravaille avec un peu plus de spécificité comme des classes spécifiques "menu_niveau_1" "menu_niveau_2" etc par exemple

dereck1979 a écrit :
le méga menu ne se cache pas je le vois et je veux que quand ont passe la souris sur dropdown le menu apparaisse en dessous plein écran

une fois corrigé ce que j'ai mis au dessus ca devrait focntionner mais tu auras un soucis : ton menu disparaitra dès que tu enlève le curseur de "dropdown" car le mega menu est totaleemnt séparé du bouton donc pas moyen de laisser la souris dessus...
Modifié par _laurent (22 Feb 2021 - 18:20)
Sujet clos
Aller à