Elementhöhe nicht korrekt bei Hover mit Anzeige weiterer Elemente

[jemand anders]

Hallo,

https://jsfiddle.net/60wgk8u6/

Hat jemand eine Ahnung, wie der erste ul "mitwächst" in der Höhe, wenn Untermenüs aufgemacht werden?
Und wie könnte man das mit dem <span>⌄</span> anders mit CSS (before) unter Beibehaltung Meta-Tag UTF-8 lösen?

Grüße

 

[jemand anders]

Nachtrag: Und wie würde man es erreichen, dass der letzte Tab den Rest der Zeile ausmacht, d. h. Unterstrich bis zum Ende und Border Right am Ende?

 

[SpiceLab]

Hat jemand eine Ahnung, wie der erste ul "mitwächst" in der Höhe, wenn Untermenüs aufgemacht werden?

#primary_nav_wrap ul ul {
  display: none;
  /*position: absolute;
  top: 100%;
  left: 0;*/
  background: #eee;
  padding: 0;
}

Und wie könnte man das mit dem <span>⌄</span> anders mit CSS (before) unter Beibehaltung Meta-Tag UTF-8 lösen?

a.arrow:after {  
  content: '⌄';
  position:relative;
  top:-3px;
  right:-3px
}

https://jsfiddle.net/spicelab/9uajdxf2/

 

[SpiceLab]

Nachtrag: Und wie würde man es erreichen, dass der letzte Tab den Rest der Zeile ausmacht, d. h. Unterstrich bis zum Ende und Border Right am Ende?

Mit Hilfe einer CSS-Tabelle (display:table & display:table-cell).

Änderungen u. Ergänzungen im CSS:

#primary_nav_wrap {
  margin-bottom: 25px;
  width: 100%; /* anstatt 500px */
  background: #f9f9f9;
  min-height: 33px;
}
#primary_nav_wrap>ul {
  background: #eee;
  border-bottom: 1px solid #ddd;
  display:table; /* Element verhält sich wie Tabelle */
  width:100% /* Elementbreite */
}
#primary_nav_wrap ul li {
  position: relative;
  /*float: left;*/ /* auskommentiert */
  margin: 0;
  padding: 0;
  display:table-cell /* Element verhält sich wie Tabellenzelle */
}
/* ersten <li>-Elementen eine Breite zuweisen - von mir frei gewählt */
#primary_nav_wrap>ul>li:nth-child(1),
#primary_nav_wrap>ul>li:nth-child(2),
#primary_nav_wrap>ul>li:nth-child(3) {
  width:60px
}
#primary_nav_wrap ul ul li {
  /*float: none;*/ /* auskommentiert, da obsolet */
  display:block; /* um Vererbung von display:table-cell vorzubeugen */
  _max-width: 500px
}

https://jsfiddle.net/spicelab/a511xq4e/

 

[Jan-Frederik Stieler]

Hi,
Kannst du mir verraten was es bei dir mit dem Meta-Element utf-8 auf sich hat?
Warum denkst du das es was mit CSS zu tun hat?

Grüße

 

[SpiceLab]

Kannst du mir verraten was es bei dir mit dem Meta-Element utf-8 auf sich hat?
Warum denkst du das es was mit CSS zu tun hat?

Die Zeichenkodierung des HTML-Dokuments wurde nicht deklariert. Das Dokument wird in manchen Browser-Konfigurationen mit verstümmeltem Text dargestellt, wenn das Dokument Zeichen außerhalb des US-ASCII-Bereichs enthält. Die Zeichenkodierung der Seite muss im Dokument oder Transferprotokoll deklariert werden.

Gilt auch für eingebundene CSS-Dateien, die nicht UTF8-kodiert gespeichert wurden.

Ansonsten kommt das dabei heraus: Link 2 ⌄

 

[Jan-Frederik Stieler]

Hi Mike,
mir ist schon klar was dies bewirkt bzw. auch in Konstellation mit CSS. Aber was ich nicht verstehe, was dies mit dem CSS-Problem zu tun hat das @phwert da so explizit drauf pocht, dass die Lösung auch unter Beibehaltung des Meta-Elementes funktioniert.

Grüße

 

[SpiceLab]

[...] was ich nicht verstehe, was dies mit dem CSS-Problem zu tun hat das @phwert da so explizit drauf pocht, dass die Lösung auch unter Beibehaltung des Meta-Elementes funktioniert.

Also auf den Themenbetreff bezieht es sich nicht

Und wie könnte man das mit dem <span>⌄</span> anders mit CSS (before) unter Beibehaltung Meta-Tag UTF-8 lösen?

Warum er darauf pocht, weiß ich nicht. UTF8 ist bei mir Standard