1. ⭐⭐⭐ Grosse PROMO en cours sur ma plateforme SEO My Ranking Metrics
    Rejeter la notice

Mon ménu déroulant décale tous les éléments qui se trouvent après

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par thierry6, 18 Janvier 2015.

  1. thierry6
    thierry6 WRInaute discret
    Inscrit:
    14 Novembre 2007
    Messages:
    68
    J'aime reçus:
    0
    Bonjour à tous.

    Donc, quand les sous-menu se déroulent, tous les éléments qui suivent dans le site se décalent. Je pense qu'il s'agit d'un problème de positionnement et z-index, mais pas moyen de trouver.

    Merci d'avance pour votre aide.

    CSS
    #menu {
    height: 33px;
    width: 990px;
    }
    #menu ul { /* liste des rubriques visibles par défaut */
    margin:0; /* annulation de toute marge externe */
    padding:0; /* annulation de toute marge interne */
    list-style-type:none; /* mise à l'horizontale des éléments de la liste */
    text-align:center;
    }
    #menu li { /* style pour les élements de la liste principale */
    float:left; /* mise à l'horizontale */
    margin:auto; /* centrage de l'élément de liste */
    padding:0; /* annulation de toute marge interne */
    background-color:#FFF; /* hauteur de l'élément de liste */
    }
    #menu li a { /* lien présent dans la liste principale */
    display:block; /* largeur de la surface de clic */
    color:#000000; /* couleur noire du texte */
    text-decoration:none; /* marge interne autour du lien */
    border-right:dotted 1px #eeeeee; /* ajout d'un trait de séparation à droite de chaque item */
    }
    #menu li a:hover { /* survol du lien de la première liste */
    color:#000; /* couleur blanche du texte lors du survol */
    background-color: #00F;
    }
    #menu ul li ul { /* sous-liste */
    display:none; /* cachée par défaut */
    position: relative;
    z-index: 2;
    }
    #menu ul li:hover ul { /* affichage de la sous-liste quand on passe la souris sur la liste principale */
    display:block;
    }
    #menu li:hover ul li { /* correction nécessaire pour IE */
    float:none;
    }
    #menu li ul li{ /* trait de séparation sous chaque item du menu déroulant */
    border-top:dotted 1px #eeeeee;
    }
    .li1 {
    width: 407px;
    }
    .li2 {
    width: 100px;
    }
    .li3 {
    width: 100px;
    }
    .li4 {
    width: 100px;
    }
    .li5 {
    width: 100px;
    }
    .li6 {
    width: 100px;
    }
    .li7 {
    width: 50px;
    }
    .li8 {
    width: 33px;
    }
    #menu ul li a {
    position: relative;
    z-index: 2;
    }

    Code du menu
    <div id="menu">
    <ul>
    <li class="li1"><a href="#">Nos locations</a>

    <ul>
    <li><a href="#">Le Paradisier</a></li>
    <li><a href="#">Les Oliviers</a></li>
    <li><a href="#">La Pascaline</a></li>
    <li><a href="#">La Noélie - rez de jardin</a></li>
    <li><a href="#">La Noélie - 1er étage</a></li>
    <li><a href="#">L'Eugénie</a></li>
    <li><a href="#">La Maison d'Odon</a></li>
    <li><a href="#">La Noélie - villa entière</a></li>
    <li><a href="#">Le Bonheur Orangé</a></li>
    <li><a href="#">Le Soleil</a></li>
    </ul>
    </li>
    </ul>

    <ul>
    <li class="li2"><a href="#">Tarifs</a>
    <ul>
    <li><a href="#">Tarifs semaine</a></li>
    <li><a href="#">Tarifs nuitée</a></li>
    <li><a href="#">Tarifs longues périodes</a></li>
    <li><a href="#">Locations vides</a></li>
    </ul>
    </li>
    </ul>

    <ul>
    <li class="li3"><a href="#">Promotions</a>
    <ul>
    <li><a href="#">Last minute</a></li>
    <li><a href="#">Early booking</a></li>
    </ul>
    </li>
    </ul>

    <ul>
    <li class="li4"><a href="#">Réservez</a>
    <ul>
    <li><a href="#">Comment faire?</a></li>
    <li><a href="#">Contrat type</a></li>
    <li><a href="#">Conditions générales</a></li>
    <li><a href="#">Formulaire</a></li>
    </ul>
    </li>
    </ul>

    <ul>
    <li class="li5"><a href="#">Contact</a>
    <ul>
    <li><a href="#">Nous joindre</a></li>
    <li><a href="#">Formulaire</a></li>
    </ul>
    </li>
    </ul>

    <ul>
    <li class="li6"><a href="#">Bons plans</a>
    <ul>
    <li><a href="#">Nos avantages</a></li>
    <li><a href="#">Hébergements de qualité</a></li>
    <li><a href="#">Chèques vacances</a></li>
    <li><a href="#">Visiter à proximité</a></li>
    <li><a href="#">Nos bonnes adresses</a></li>
    <li><a href="#">Activités sympas</a></li>
    <li><a href="#">Sites amis</a></li>
    </ul>
    </li>
    </ul>

    <ul>
    <li class="li7"><a href="../index.html"><img src="../nav/flags/flag_f.png" width="50" height="33" /></a>
    <ul>
    <li><a href="../index_gb.html"><img src="../nav/flags/flag_gb.png" width="50" height="33" /></a></li>
    <li><a href="../index_de.html"><img src="../nav/flags/flag_d.png" width="50" height="33" /></a></li>
    <li><a href="../index_it.html"><img src="../nav/flags/flag_it.png" width="50" height="33" /></a></li>
    <li><a href="../index_nl.html"><img src="../nav/flags/flag_nl.png" width="50" height="33" /></a></li>
    <li><a href="../index_sp.html"><img src="../nav/flags/flag_sp.png" width="50" height="33" /></a></li>
    <li><a href="../index_pl.html"><img src="../nav/flags/flag_pl.png" width="50" height="33" /></a></li>
    </ul>
    </ul>

    <ul>
    <li class="li8"><img src="../logos/reseaux/facebook.png" width="33" height="33" />
    <ul>
    <li><img src="../logos/reseaux/twitter.png" width="33" height="33" /></li>
    </ul>
    </li>
    </ul>
    </div>
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 808
    J'aime reçus:
    242
    1° Il y a un bbcode
    Code:
    .
    2° C'est plus facile avec un paste sur [url=http://jsfiddle.net/]http://jsfiddle.net/[/url] (par exemple) pr avoir une démo live.
    
    C'est un position: absolute qui manque dans le sous <ul>.
     
  3. thierry6
    thierry6 WRInaute discret
    Inscrit:
    14 Novembre 2007
    Messages:
    68
    J'aime reçus:
    0
     
Chargement...
Similar Threads - ménu déroulant décale Forum Date
problème lien menu deroulant sur wix Demandes d'avis et de conseils sur vos sites 23 Janvier 2019
Mieux vaut-il un select ou un menu déroulant CSS Développement d'un site Web ou d'une appli mobile 15 Mars 2017
Vers la fin du menu déroulant? Administration d'un site Web 17 Avril 2016
Question sur menu déroulant Développement d'un site Web ou d'une appli mobile 20 Janvier 2016
Récupération des données d'un menu déroulant en HTML Développement d'un site Web ou d'une appli mobile 22 Septembre 2015
Comment faire pour avoir ce menu déroulant sur Bing Référencement Bing 21 Avril 2015
Fermer OnMouseOver menu déroulant Développement d'un site Web ou d'une appli mobile 18 Novembre 2014
Niveau et importances des URL dans menu déroulant Débuter en référencement 28 Juillet 2014
menu déroulant qui ne fonctionne pas Développement d'un site Web ou d'une appli mobile 18 Juin 2014
Menus déroulants (html + css) et Référencement Débuter en référencement 11 Septembre 2013
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice