Menu déroulant - Faire de la <ul> sous-menu 100% de largeur

Je vais un peu fou en essayant de réaliser quelque chose de mon client veut. Je pourrais dire que c'est pas possible, mais j'aime un bon défi 😉

En gros, je suis en train de faire un menu déroulant dans lequel la liste déroulante <ul>, ou:

ul.menu li ul

est entouré par un div. Genre:

<ul class="menu">
   <li>
       <a href="#">Item</a>
       <div class="submenu">
           <ul>.....</ul>
       </div>
   </li>
</ul>

Je veux que la div avoir width:100% et occuper toute la largeur de la page, mais ont l'UL à l'intérieur aligné à la appropriée <li>.

Le problème est le <div class="submenu"> sera aussi large que la relative conteneur, le principal <ul class="menu"> ou un <div> emballage de la <ul class="menu">.

Le site lui-même a 1000px de largeur et est centrée sur la largeur margin:0 auto;

J'espère que je m'en suis expliqué correctement :S Voici un lien vers une maquette que j'ai mis ensemble: Menu déroulant se Moquer d'

Toute aide grandement appréciée.

Grâce,
Alex

Vous est-il nécessaire d'avoir position: relative sur les éléments de parent? Si vous ne l'êtes pas, vous pouvez juste avoir un pseudo avec élément fixe en hauteur et un arrière-plan, voici le démo. Si vous sont requis, il est encore impossible, vous pourriez avoir une position absolue de l'élément enfant de <body>, jeu de l'empilage avec d' z-index et ainsi de suite. Mais il ne serait pas une solution flexible, parce que vous auriez à régler manuellement top si l'espacement vertical est changé.
Malheureusement, serait downvote si je pouvais, depuis le "Menu Déroulant Mock-up" est un spam rempli lien de redirection.

OriginalL'auteur elmediano | 2011-06-16

  1. 7

    Vieille question, mais j'espère que la réponse sera aider quelqu'un. J'ai eu à travailler sur quelque chose de semblable à cela dans un mois ou si il ya.

    Ici est un violon de ce que je faisait (remarque: vous devez faire un travail supplémentaire pour que cela fonctionne de la même dans les anciens S): http://jsfiddle.net/doubleswirve/xbLrW/2/

    Je n'ai pas utilisé un imbriquée div et plutôt coincé avec des listes imbriquées. Avec une base de balisage comme suit:

    <div class="nav">
  <ul>

    <li>
      <a href="#">Products</a>
      <ul>
        <li><a href="#">Widget A</a></li>
        <li><a href="#">Widget B</a></li>
        <li><a href="#">Widget C</a></li>
      </ul>
    </li>

    <li>
      <a href="#">Locations</a>
      <ul>
        <li><a href="#">Location A</a></li>
        <li><a href="#">Location B</a></li>
        <li><a href="#">Location C</a></li>
      </ul>
    </li>

    <li>
      <a href="#">Staff</a>
      <ul>
        <li><a href="#">President</a></li>
        <li><a href="#">VP</a></li>
        <li><a href="#">Manager</a></li>
      </ul>
    </li>

  </ul>
</div>

    Vous pouvez utiliser les éléments suivants style:

    /* GENERAL */

body { overflow-x: hidden; } /* trick from css-tricks comments */

/* FIRST LEVEL */

.nav > ul > li { 
  display: inline-block; 
  position: relative; 
  padding: 3px 10px 3px 0;
  z-index: 100;
}

/* SECOND LEVEL */

.nav > ul > li > ul {
  position: absolute;
  left: 0;
  top: 100%;
  padding: 0 1000em; /* trick from css-tricks comments */
  margin: 0 -1000em; /* trick from css-tricks comments */
  z-index: 101;
  visibility: hidden;
  opacity: 0;
  background: rgba(255, 240, 240, 0.8);
}

.nav > ul > li:hover > ul {
  visibility: visible;
  opacity: 1;
}

.nav > ul > li > ul > li {
  padding: 3px 0;
}

    Si vous vouliez obtenir snazzy avec le CSS, vous pouvez l'ajouter à la deuxième niveau ul:

    .nav > ul > li > ul {
  ...
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

    Si quelqu'un est intéressé à faire ce travail de la même façon dans le vieux-S ou veut plus profond des listes imbriquées, laissez-moi savoir.

    Pour vous donner une longueur d'avance, voici quelques liens utiles qui m'a aidé:

    Chris Coyier couvre vraiment nous au travail lol.

    OriginalL'auteur doubleswirve

  2. 1

    Vous avez tout à fait raison, que le modèle de boîte ne fonctionne pas de cette façon.

    Il y a une chose que je pense, et c'est à définir votre divs à

    position:absolute

    et utiliser le haut, à gauche, à droite attributs de position. Mais, comme vous le dites, cela ne fonctionnera pas si vous avez la position: relative sur un élément parent.

    Pour être honnête, il est difficile d'atteindre cet objectif sans un horrible gâchis de solutions de contournement qui sera probablement la pause entre les navigateurs. J'ai vu des pairs et des collègues à passer des plombes à essayer de mettre en œuvre ce genre de choses, la construction de plus en plus précaire code 'bugs' pour le faire le travail de la croix-navigateur, de recevoir des plaintes de clients sur il ne fonctionne pas sous IE6 et Firefox 1.5, seulement à renoncer à cette "fonctionnalité" entièrement.

    OriginalL'auteur Lexx Koto