18041 sujets

Questions générales et questions de débutants

Aide sur menu/sous menu horizontal

Bonsoir,

je me suis lancé depuis peu dans le CSS et je souhaiterai faire un menu horizontal avec sous menu horizontal également !
J'ai récupéré une "base de travail" que j'ai un peu remixé pour obtenir le résultat souhaité...je sèche encore sur un truc à savoir le centrage du contenu de mon sous menu (le menu noir) et non l'alignement à gauche...peut être simplissime mais je en trouve pas... Smiley langue

Bref si une âme charitable passe par là histoire de m'optimiser le code (y'a surement du bricolage) et de me trouver une solution à mon problème... je suis preneur Smiley lol

Ci dessous le code HTML et le CSS...Merci d'avance ! (Code coloré pour ma compréhension Smiley confused 


<!DOCTYPE html>
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <link rel="shortcut icon" type="image/ico" href="img/favicon.gif" />
   <link rel="stylesheet" type="text/css" href="style2.css" />
   <title> titre </title>
 </head>
 <body>


<div id="mainmenu">
 
<ul id="nav">
<li><a href="#">MENU 1</a></li>
 
<li><a href="#">MENU 2</a>
 <ul>
 <li><a href="#">SS MENU A</a></li>
 <li><a href="#">SS MENU B</a></li>
 <li><a href="#">SS MENU D</a></li>
 </ul>
</li>

 <li><a href="#">MENU 3</a>
 <ul>
 <li><a href="#">SS MENU E</a></li>
 <li><a href="#">SS MENU F</a></li>
 <li><a href="#">SS MENU G</a></li>
 <li><a href="#">SS MENU H</a></li>
 </ul>
</li>

 <li><a href="#">MENU 4</a>
 <ul>
 <li><a href="#">SS MENU I</a></li>
 <li><a href="#">SS MENU J</a></li>
 </ul>
</li>

 <li><a href="#">MENU 5</a>
 <ul>
 <li><a href="#">SS MENU K</a></li>
 <li><a href="#">SS MENU L</a></li>
 </ul>
</li>

 <li><a href="#">MENU 6</a>
 <ul>
 <li><a href="#">SS MENU M</a></li>
 <li><a href="#">SS MENU N</a></li>
 </ul>
</li>

</ul>
 </div>

 </body>
</html>




#mainmenu {
  width: 1000px;
  height: 60px;
  clear: both;
}
 
ul#nav {
  float: left;
  width: 960px;
  height: 60px;
  list-style: none;
  background-color: #ff3333;
}
 
ul#nav li {
  display: inline;
}
 
ul#nav li a {
  float: left;
  font-size: 23px;
  line-height: 30px;
  color: #fff;
  text-decoration: none;
  text-shadow: 2px 2px 2px #000;
  background-color: #999999; /*GRIS*/
  margin: 0px 12px 0px 20px;
}
 
ul#nav .current a, ul#nav li:hover > a  {
  height: 44px;
  color: #ff3333;
  text-decoration: none;
  text-shadow: 2px 2px 2px #000;
  background-color: #6699ff;  /*BLEU*/
}
 
ul#nav  ul {
  display: none;
}
 
ul#nav li:hover > ul {
  position: absolute;
  display: block;
  width: 882px;
  height: 30px;
  margin-top: 44px;
  background-color: #000;  /*NOIR*/
}
 
ul#nav li:hover > ul li a {
  float: left;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #110000;
  background-color: #ff0000; /*ROUGE*/
}
 
ul#nav li:hover > ul li a:hover {
  color: #ff3333;
  height: 30px;
  padding: : 0 20px 0 0;
  text-decoration: none;
  text-shadow: 2px 2px 2px #000;
  background-color: #ff00ff; /*VIOLET*/
}
Merci pour ta réponse, je vais regarder cela.
Néanmoins cela ne répond pas à ma demande initiale...un menu horizontal avec sous menu horizontal
Modifié par Oly (09 Jul 2017 - 23:47)
Hello

Je t'ai concocté ceci. Tu peux t'en servir comme base. J'ai été aussi simple que possible. Je conseille de bien étudier le code pour le comprendre. Lorsque l'on débute c'est mieux d'écrire son propre code. On peut s'inspirer du code des autres, bien sûr, mais ne pas les rependre. Puisque le jour où tu devras créer quelque chose (from scratch) ou débugger un code existant, tu vas coincer puisque tu n'auras pas pris le temps de bien comprendre en langage en soit.

https://jsfiddle.net/L6pw3p67/1/

Si tu as des questions, pose-les moi!
Sujet clos
Aller à