Impossible d'accéder au menu déroulant en survol, rapprocher

Question

Mon site Web dispose d'une barre de navigation avec un menu déroulant. Sur les appareils ayant une largeur de 1024px (ordinateurs de bureau de 12 et 13 pouces), ma barre de navigation devient réactive et s'empile en 2 lignes pour s'adapter à la taille de l'écran.

Lorsque je plane sur un élément de menu dans la rangée supérieure de la barre de navigation, le menu déroulant ci-dessous montre la rangée du bas de la barre de navigation. Cela crée un écart qui brise l'action du vol stationnaire. Je dois fermer l'écart SEULEMENT SUR LES ARTICLES de MENU de LIGNE SUPÉRIEURE de la barre de navigation. Je copié le code ci-dessous d'inspecter l'élément du menu déroulant Je veux avancer:

.navbar-nav>li>.dropdown-menu { 
margin-top: -10px; 
} 

.dropdown .dropdown-menu { 
border-radius: 0; 
top: 120% !important; 
} 

.yamm .dropdown-menu { 
left: auto; 
} 

.dropdown-menu { 
min-width: 110px; 
padding-right: 25px; 
} 

.dropdown-menu { 
z-index: 1021; 
position: absolute; 
display: none; 
float: left; 
padding: 5px 0; 
margin: 2px 0 0; 
font-size: 13px; 
text-align: left; 
list-style: none; 
background-color: #fff; 
background-clip: padding-box; 
border: 1px solid rgba(0,0,0,.15); 
box-shadow: 0 6px 12px rgba(0,0,0,.175); 
} 

Si vous avez besoin d'une meilleure explication vous pouvez le vérifier en direct, greenenvysupply.com et zoomez taille de votre écran jusqu'à ce que la Navbar empile et forme deux rangées. Ensuite, essayez de planer sur un élément de menu de la rangée supérieure qui contient un élément de menu. Vous ne serez pas en mesure d'accéder à la liste déroulante.

J'ai essayé la pensée de code suivant je pouvais régler la marge supérieure uniquement sur des tailles d'écran de 1024px:

@media (width: 1024px) { 
    #menu-item-5044 .dropdown-menu, #menu-item-5066 .dropdown-menu, 
    #menu-item-5076 .dropdown-menu, #menu-item-5085 .dropdown-menu, 
    #menu-item-5113 .dropdown-menu, #menu-item-5129 .dropdown-menu, 
    #menu-item-5128 .dropdown-menu, #menu-item-5111 .dropdown-menu { 
     margin-top: -67px !important; 
    } 
} 

Quand je teste cela, je ne vois aucun changement. Je suis complètement nouveau au codage et à la conception de Web, corrigez-moi svp si je fais quelque chose mal!

Answer 1

En regardant le code à l'URL spécifiée, je remarque beaucoup de CSS en conflit. La position top de vos éléments .dropdown-menu est définie plusieurs fois et est effectuée avec les déclarations !important qui les rendront difficiles à remplacer.

Lorsque j'ai examiné les .dropdown-menu éléments de l'inspecteur Chrome et désactivé tous top positionnement, comme:

.dropdown .dropdown-menu { 
    top: 120% !important; 
} 

j'ai pu voir les menus qui apparaissent juste au-dessous de leurs déclencheurs. Je commencerais par enlever cela et voir si cela vous rapproche.

Mais bref, je ne pense pas qu'il y ait une solution facile ici sans refaire beaucoup de CSS. Je pense aussi que vous êtes en train de livrer une bataille perdue si vous essayez de changer la position de la poignée de menus qui apparaissent sur la première ligne.