Drop-Down nicht Zentrierung in Bezug auf Eltern

Ich habe Schwierigkeiten, meine Drop-down <ul class="second-level"> Liste zu zentrieren. Das Elternteil <li> hat position: relative; und das Kind <ul> hat position: absolute;, aber es ist immer noch nicht zentriert.Drop-Down nicht Zentrierung in Bezug auf Eltern

Hier ist ein Fiddle

Quelle

2016-05-13 Madness

Ich denke, es hat etwas mit dem Hinzufügen einer Breite zum Dropdown-Menü zu tun (was ich tun möchte). Immer wenn ich eine Breite hinzufüge, wird das Menü auf eine Seite verschoben. – Madness

versuchen Sie dies in Ihrem Code

<style> 
     /** Desktop **/ 
header #desktop-nav { 
    padding: 0 0 20px; 
} 
header #desktop-nav ul li { 
    display: inline-block; 
    width: 175px; 
    font-size: 18px; 
    position: relative; 
    padding-bottom: 20px; 
} 
header #desktop-nav ul li:first-child { 
    margin: 0; 
    padding: 0; 
    position: relative; 
    top: 13px; 
    width: 40px; 
    left: -20px; 
} 


    header #desktop-nav ul li ul.second-level { 
     background: transparent; 
    padding: 0; 
    visibility: hidden; 
    opacity: 0; 
    position: absolute; 
    top: 36px; 
    left: -4em; 
    z-index: 1; 
    -webkit-transition: all 0.4s; 
    -moz-transition: all 0.4s; 
    -ms-transition: all 0.4s; 
    transition: all 0.4s; 
} 
header #desktop-nav ul li ul.second-level .arrow-container { 
    color: #4c4c4c; 
    position: relative; 
    top: 6px; 
} 
header #desktop-nav ul li ul.second-level li { 
    padding: 12px 0; 
    border-bottom: 1px solid #67676b; 
    background: #4c4c4c; 
    -webkit-transition: all 0.4s; 
    -moz-transition: all 0.4s; 
    -ms-transition: all 0.4s; 
    transition: all 0.4s; 
    width: 240px; 
} 
header #desktop-nav ul li ul.second-level li:last-child { 
    border-bottom: 0 solid transparent !important; 
} 
header #desktop-nav ul li ul.second-level li a { 
    display: block; 
    font-size: 15px; 
    color: #eaeaea; 
    border-bottom: 0; 
    text-align: center; 

} 
header #desktop-nav ul li ul.second-level li a > img { 
    position: fixed; 
    top: 10px; 
} 
header #desktop-nav ul li ul.second-level li:hover { 
    background: #363636; 
} 
header #desktop-nav ul li ul.second-level li .up-arrow { 
    color: #4c4c4c; 
    cursor: default; 
    font-size: 14px; 
    left: 48%; 
    position: absolute; 
    top: -11px; 
} 
header #desktop-nav ul li.active a { 
    color: #c40009; 
    border-bottom: 3px solid #c40009; 
    padding-bottom: 8px; 
} 
header #desktop-nav ul li:hover > .second-level { 
    visibility: visible; 
    opacity: 1; 
} 
header #desktop-nav ul li:hover > a { 
    color: #c40009; 
    border-bottom: 3px solid #c40009; 
    color: #c40009; 
    padding-bottom: 8px; 
} 
header #desktop-nav ul li:hover > a.stickyLogo { 
    border-bottom: 0; 
} 
header #desktop-nav a { 
    -webkit-transition: color 0.4s; 
    -moz-transition: color 0.4s; 
    -ms-transition: color 0.4s; 
    transition: color 0.4s; 
} 

    </style>

Quelle

2016-05-13 09:14:51

Die Fiddle mit Ihrem Code aktualisiert, immer noch nicht funktioniert - https://jsfiddle.net/ut0veyhc/2/ – Madness

Verwenden Sie diese bearbeitete Antwort, die das vollständige Stylesheet hat und kopieren Sie es anstelle der ursprünglichen Stile –

Hmm, ich ersetzte es alles und es ist immer noch nicht zentriert. Ich möchte, dass die Dropdown-Box in der Mitte der Eltern LI – Madness

Sie es mit einem transform:translateX(); Regel erreichen können.

aktualisiert Geige Siehe: https://jsfiddle.net/ut0veyhc/4/

Hier ist die CSS:

.second-level { 
    padding: 0; 
    -webkit-transform: translateX(-25%); 
    -ms-transform: translateX(-25%); 
    transform: translateX(-25%); 
}

EDIT

Sorry, ich vergaß die css3 Präfixe hinzufügen - Ich habe den Link mit der neuen aktualisierten Geige.

Quelle

2016-05-13 09:34:01 Frits

Drop-Down nicht Zentrierung in Bezug auf Eltern

Antwort

Verwandte Themen