web-dev-qa-db-fra.com

Position CSS absolue et largeur du conteneur parent en pourcentage

J'essaie de construire un menu déroulant HTML/CSS qui est flexible en largeur. En raison de position:absolute pour le deuxième niveau de navigation, je n'ai pas la largeur du premier niveau. Suppression de la position: absolu déplacera tous les éléments suivants en survol ...

Comment puis-je résoudre ça?

Voici le code:

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.level_1 > li {
  float: left;
  width: 45%;
  background-color: #2FA4CF;
  margin-right: 6px;
}

.level_1 > li:hover ul {
  display: block;
}

.level_2 {
  display: none;
  position: absolute;
  width: 45%;
}

.level_2 li {
  background-color: #535B68;
}
<ul class="level_1">
  <li>
    <a href="#">Level one (1)</a>
    <ul class="level_2">
      <li><a href="#">Level two (1)</a></li>
    </ul>
  </li>
  <li><a href="#">Level one (2)</a></li>
</ul>

<p>Paragraph</p>

Voir le résultat ici: http://jsfiddle.net/5uf2Y/ Survolez "Niveau un (1)" et vous verrez que le deuxième niveau n'est pas de la même taille que le premier niveau .. .

htmlcssdrop-down-menucss-position
35
chris

Vous avez oublié deux éléments pour un affichage à 100%.

Correction ici

Le premier élément oublie que c'est: Position relative au niveau_1> li

.level_1 > li {
    float: left;
    width: 45%;
    background-color: #2FA4CF;
    margin-right: 6px;
    **position:relative;**
}

Corrections du 2ème élément c'est: change la taille du 2ème li

.level_2 {
    display: none;
    position: absolute;
    width: 100%;
}

Avec "width:100%" sur .level_2 il tourne automatiquement avec la largeur de son parent

54
artSx

Ajouter position:relative à level_1 > li

.level_1 > li {
    float: left;
    width: 45%;
    background-color: #2FA4CF;
    margin-right: 6px;
    position:relative;
}
6
Lowkase

Essayez de définir le body { width:100%;} propriété, il corrigera ce problème, comme indiqué ci-dessous (ajouté à votre CSS d'origine):

body{ width:100%;}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.level_1 > li {
    float: left;
    width: 45%;
    background-color: #2FA4CF;
    margin-right: 6px;
}
.level_1 > li:hover ul {
    display: block;
}
.level_2 {
    display: none;
    position: absolute;
    width: 45%;
}

.level_2 li {
    background-color: #535B68;
}
0
Alexander Bell

Hé mec, tu as une marge de 6px sur votre première ligne li c'est pourquoi c'est un peu plus grand. J'utiliserais une marge à gauche plutôt qu'à droite. Cela devrait fixer l'espacement.

0
Cam