La propriété CSS skewX provoque des problèmes avec les menus déroulants des fondations

Question

J'essaie de modifier le niveau supérieur des éléments de menu [avec succès] - J'ai réussi à aligner le li et les balises alignées correctement, mais le fichier ul.dropdown s'affiche sous le reste des éléments du document et il est décalé vers la droite - avec des décalages différents pour chaque liste déroulante. Il semble également avoir eu une certaine transparence appliquée.

violon est ici: https://jsfiddle.net/acto8k5y/5/

• vous devez ouvrir le violon assez large pour voir le menu non réactif
• tout le menu personnalisé CSS est au bas du panneau css

C'est ce que je me sers pour seulement la partie désalignement:

.top-bar-section ul > li { 
    margin: 0 10px; 
    -webkit-transform: skew(30deg); 
    -moz-transform: skew(30deg); 
    -o-transform: skew(30deg); 
    } 


    .top-bar-section ul li > a { 
    -webkit-transform: skew(-30deg); 
    -moz-transform: skew(-30deg); 
    -o-transform: skew(-30deg); 
    } 

    .top-bar-section > ul > li .dropdown { 
    -webkit-transform: skew(-30deg); 
    -moz-transform: skew(-30deg); 
    -o-transform: skew(-30deg); 
    } 

Quel est le problème ici?

Answer 1

Si vous désactivez sélectivement l'inclinaison inverse dans le sous-menu ul, vous remarquerez que le ul est aligné avec la barre colorée sous chaque élément de menu. Il semblerait que l'inclinaison de l'élément ul ait l'origine de la transformation au bas de l'élément, avec l'effet qu'il est poussé vers la droite à la position visible.

Si le seul élément que vous souhaitez biaiser est la barre colorée en dessous de chaque élément de menu, vous pourriez être mieux remplacer les s transform de » biaiser avec des pseudo-éléments pour créer le biseau:

.top-bar-section .has-dropdown::before { 
    position: absolute; 
    bottom: -10px; 
    left: -10px; 
    display: inline-block; 
    content: ""; 
    width: 5px; 
    height: 5px; 
    border: 5px solid; 
    border-bottom-color: transparent; 
    border-left-color: transparent; 
} 
.top-bar-section .has-dropdown::after { 
    position: absolute; 
    right: -10px; 
    display: inline-block; 
    content: ""; 
    width: 5px; 
    height: 5px; 
    border: 5px solid; 
    border-top-color: transparent; 
    border-right-color: transparent; 
} 
.top-bar-section .health { 
    color: #00adeb; 
} 
.top-bar-section .family { 
    color: #3ab652; 
} 
.top-bar-section .community { 
    color: #f59334; 
} 
.top-bar-section .has-dropdown > a { 
    color: #000; 
} 

Alors que le CSS est légèrement plus complexe et prolixe, cela signifie qu'il y aura moins de transformations superposées et réduira également la charge graphique sur les navigateurs clients. En utilisant ce CSS, le menu déroulant est positionné par rapport à l'élément de menu original. Voir le https://jsfiddle.net/acto8k5y/6/.