it-swarm.com.de

CSS-Position absolut und Breite des übergeordneten Containers in Prozent

Ich versuche, ein HTML/CSS-Dropdown-Menü zu erstellen, das in der Breite flexibel ist. Aufgrund der position:absolute für die zweite Ebene der Navigation erhalte ich nicht die Breite der ersten Ebene. Entfernen der Position: Absolut verschiebt alle folgenden Elemente beim Hover ...

Wie kann ich das lösen?

Hier ist der 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>

Sehen Sie das Ergebnis hier: http://jsfiddle.net/5uf2Y/ Bewegen Sie den Mauszeiger über "Level eins (1)" und Sie werden sehen, dass das zweite Level nicht die gleiche Größe wie das erste Level hat. .

35
chris

Sie haben zwei Elemente für die Anzeige 100% vergessen.

Korrektur hier

1. Elemente vergisst es: Position relativ auf Ebene_1> li

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

2. Elementkorrekturen es ist: Größe der 2. Li ändern

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

Mit "width:100%" auf .level_2 dreht sich automatisch mit der Breite des übergeordneten Elements

54
artSx

Hinzufügen position:relative bis level_1 > li

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

Versuchen Sie, das body { width:100%;} -Eigenschaft, dieses Problem wird behoben, wie unten gezeigt (zu Ihrem ursprünglichen CSS hinzugefügt):

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

Hey Mann, du hast einen Spielraum von 6px in deiner ersten Reihe li deshalb ist es etwas größer. Ich würde eher einen linken als einen rechten Rand verwenden. Das sollte den Abstand fixieren.

0
Cam