Aligner un groupe de listes incluant des sous listes HTML CSS

xavxav -  
 xavxav -
Bonjour,

Premierement, pardonnez moi pour la ponctuation, j'ecris a partir d'un clavier qui n'a pas les accents francais.

Voila ma situation:
Dans le cadre de la creation d'un menu deroulant avec HTML et CSS, j'ai un groupe de listes dont certaines comprennent elles meme des sous listes!

En gros j'essaie de reproduire le menu deroulant present sur ce site : http://www.thomson.co.uk/
Comme vous pouvez le voir, 'Holidays' 'Cruises' et 'Flights' sont deroulant et le reste 'Deals', 'Destinations' et 'Extra' sont statiques (pas de sous categories).

Voici mon code HTML:

<ul class="dropdowns">
<li>
<a href="http://www.thomson.co.uk/">Holidays</a>
<ul class="drops">
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</li>
<li>
<a href="">Cruises</a>
<ul class="drops">
<li>link5</li>
<li>link6</li>
<li>link7</li>
</ul>
</li>
<li>
<a href="">Flights</a>
<ul class="drops">
<li>link8</li>
<li>link9</li>
<li>link10</li>
</ul>
</li>
<li>
<a href="http://www.thomson.co.uk/destinations/deals">Deals</a>
</li>

<li>
<a href="http://www.thomson.co.uk/destinations/holiday-destinations.html">Destinations</a>
</li>

<li>
<a href="http://www.thomson.co.uk/holiday-extras.html">Extra</a>
</li>
</ul>

Voici le code CSS:

.dropdowns li {
display: inline-block;
}

Le probleme:

Pour je ne sais quelle raison, la derniere liste s'aligne avec la prochaine. Donc en fait, une sous liste (faisant partie d'un onglet du menu), va saligner avec la prochaine liste qui est un onglet... Vous comprendrez que du point de vue esthetique c'est pas terrible !

Je pens que le probleme vient de CSS mais narrive pas a trouver. J'ai essaye plein de possibilite sur mon html et css et tjrs meme probleme.

Merci de m'aiguiller.

Xav

A voir également:

2 réponses

Réponse 1 / 2
xavxav
 
Tellement sympa !

Merci beaucoup :-)
1
Réponse 2 / 2
MedAliMeziane Messages postés 168 Date d'inscription   Statut Membre Dernière intervention   172
 
Bonjour,

J'espère que l'exemple ci-joint vous donne plus d'idée sur la conception du menu horizontal déroutant.

Bon travail 


<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
   body{
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 1.3em;

   }
   #menu-deroulant, #menu-deroulant ul {
      padding: 0;
      margin: 0;
      list-style: none;
   }
   #menu-deroulant {
      /* on centre le menu dans la page */
      text-align: center;
   }
   #menu-deroulant li {
      /* on place les liens du menu horizontalement */
      display: inline-block;
   }
   #menu-deroulant li:hover {
      /* on place les liens du menu horizontalement */
      background-color: #f5e79e;
   }
   #menu-deroulant ul li {
      /* on enlève ce comportement pour les liens du sous menu */
      display: inherit;
   }
   #menu-deroulant a {
      text-decoration: none;
      display: block;
      color: #000;
   }
   #menu-deroulant ul {
      position: absolute;
      /* on cache les sous menus complètement sur la gauche */
      left: -999em;
      text-align: left;
      z-index: 1000;
   }
   #menu-deroulant li:hover ul {
      /* Au survol des li du menu on replace les sous menus */
      left: auto;
   }

   #menu-deroulant ul li  {
      /* on enlève ce comportement pour les liens du sous menu */
      background-color: #ebebeb;
      border: 1px solid white;
   }
</style>
</head>
<body>
<ul id="menu-deroulant">
   <li><a href="#">Lien menu 1</a>
      <ul>
         <li><a href="#">lien sous menu 1</a></li>
         <li><a href="#">lien sous menu 1</a></li>
         <li><a href="#">lien sous menu 1</a></li>
         <li><a href="#">lien sous menu 1</a></li>
      </ul>
   </li>
   |
   <li><a href="#">Lien menu 2</a>
      <ul>
         <li><a href="#">Lien sous menu 2</a></li>
         <li><a href="#">Lien sous menu 2</a></li>
         <li><a href="#">Lien sous menu 2</a></li>
         <li><a href="#">Lien sous menu 2</a></li>
      </ul>
   </li>
   |
   <li><a href="#">Lien menu 3</a>
      <ul>
         <li><a href="#">Lien sous menu 3</a></li>
         <li><a href="#">Lien sous menu 3</a></li>
         <li><a href="#">Lien sous menu 3</a></li>
         <li><a href="#">Lien sous menu 3</a></li>
      </ul>
   </li>
   |
   <li><a href="#">Lien menu 4</a></li>
   |
   <li><a href="#">Lien menu 5</a></li>
   |
   <li><a href="#">Lien menu 6</a></li>

</ul>
</body>
</html>
0

Discussions similaires

Idée de déguisement pour 4 personnes
mbc29 -
TwaregSi -

18 réponses
Envoi sms à plusieurs contacts sans passer par un groupe
guynemer95 -
guynemer95 -

8 réponses
instagram comment supprimer un groupe que l on a crée
jess.mi -
JulieGe -

3 réponses