CSS - Dropdown-Untermenü stimmt nicht korrekt mit der übergeordneten Schaltfläche überein, auch bei absoluter Positionierung

Titel ziemlich erklärend.CSS - Dropdown-Untermenü stimmt nicht korrekt mit der übergeordneten Schaltfläche überein, auch bei absoluter Positionierung

Meine Dropdown-Untermenüs stimmen nicht exakt mit dem unteren Rand des übergeordneten Listenelementelements überein.

Die li hat eine relative Position, und das Untermenü hat eine absolute Position, und ich habe versucht, die Untermenüs 100% von der Spitze der Eltern, die es etwa auf halbem Weg nach unten der übergeordneten li erscheinen. Gleichermaßen habe ich versucht, Top 175% zu verwenden, was auf meinen Bildschirmen gut funktioniert, aber nicht auf anderen. Es sollte sicher funktionieren

JSFiddle: https://jsfiddle.net/eb5xkLcj/3/ zu sein.

CSS:

nav 
{ 
position: relative; 
margin-top: 0px; 
padding: 0 2vw; 
background: rgba(232, 227, 227, 1.05); 
} 

nav ul 
{ 
position: relative; 
list-style: none; 
margin: 0; 
padding: 0; 
display: inline; 
} 

nav>ul>li 
{ 
display: inline; 
position: relative; 
margin: 0; 
padding: 0; 
} 

nav ul ul.submenu 
{ 
display: none; 
position: absolute; 
left: 0; 
top: 100%; 
list-style: none; 
top: 100%; 
background: rgba(232, 227, 227, 1.05); 
z-index: 99; 
} 

nav ul ul.submenu li, 
nav ul ul.submenu li a 
{ 
width: 200px; 
} 

nav>ul>li:hover ul.submenu 
{ 
display: inline-block; 
}

Quelle

2017-05-24 Anonymous

Ihre Geige verwendet "top: 35%". Wenn ich das durch 100% ersetze, sieht es für mich so aus, als ob das was du willst. Wenn es nicht ist - dann müssen Sie besser beschreiben, was Ihr Problem damit ist. – CBroe

Sorry, das war nur ein Tippfehler, als ich versuchte, es mit px not% zu beheben. Top 100% sollte funktionieren, aber wie ich in der Post gesagt habe, ist es nicht korrekt an der Unterseite des Elternteils ausgerichtet, es ist leicht darüber und ändert sich abhängig von dem Bildschirm, der aus irgendeinem Grund angezeigt wird. –

Sie haben die li als inline formatiert, und das ist, was diese vermasselt.

Mit Ihren Browser-Tools können Sie deutlich sehen, dass die Links im Inneren höher sind als Ihre li.

Machen Sie stattdessen Ihre liinline-block.

Quelle

2017-05-24 11:18:57 CBroe

hinzufügen Top 100%

nav ul ul.submenu 
{ 
    display: none; 
    position: absolute; 
    left: 0; 
    top: 100%; 
    list-style: none; 
    background: rgba(232, 227, 227, 1.05); 
    z-index: 99; 
}

https://jsfiddle.net/eb5xkLcj/2/

Quelle

2017-05-24 11:04:37

Hast du meinen Beitrag gelesen? Ich sagte, ich hätte das gemacht und es habe nicht richtig funktioniert. Es ist nicht richtig ausgerichtet –

hinzufügen Top 37px

nav ul ul.submenu { 
     display: none; 
     position: absolute; 
     left: 0; 
     top: 37px; 
     list-style: none; 
     background: rgba(232, 227, 227, 1.05); 
     z-index: 99; 
    }

Quelle

2017-05-24 11:19:48

i überprüft Ihre Fiedler und die Lösung für Sie gefunden. Sollte Top-Position für das Element ändern:

nav ul ul.submenu 
{ 
    display: none; 
    position: absolute; 
    left: 0; 
    top: 35px; // HERE 
    list-style: none; 
    background: rgba(232, 227, 227, 1.05); 
    z-index: 99; 
}

Überprüfen Sie auch, dass Sie top: 100% 2 mal.

Quelle

2017-05-24 11:30:39

CSS - Dropdown-Untermenü stimmt nicht korrekt mit der übergeordneten Schaltfläche überein, auch bei absoluter Positionierung

Antwort

Verwandte Themen