Background of the issue:
Hello, my language switcher on my website when I hover my mouse on another language on PC and Mobile, the other languages disappear so I can't select other languages. I try to apply CSS to counter the comportment of my language switcher but is not working perfectly. /* Conteneur du sélecteur de langue*/ .lang-item { margin: 0 10px; } /* Style par défaut du lien de langue */ .lang-item a { color: #000; /* couleur du texte */ background-color: #fff; /* couleur d'arrière-plan */ padding: 5px 10px; /* padding */ text-decoration: none; /* supprime tout soulignement */ } .wpml-ls-current-language { font-family: 'Montserrat'; } .wpml-ls-last-item { margin-right: 10px; } nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu, nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu li a { width: auto; min-width: 100px!important; } .wpml-ls-legacy-dropdown .wpml-ls-sub-menu { width: 325px; } /* Style du lien de langue lorsqu'il est survolé */ .lang-item a:hover { color: #fff; /* couleur du texte */ background-color: #000; /* couleur d'arrière-plan */ text-decoration: none; /* supprime tout soulignement */ } /* Style du lien de langue actif */ .lang-item .current-lang a { color: #fff; /* couleur du texte */ background-color: #000; /* couleur d'arrière-plan */ } /* Largeur spécifique du sous-menu dans le contexte legacy-dropdown */ .wpml-ls-legacy-dropdown .wpml-ls-sub-menu { width: 325px; visibility:visible; /* visibility: hidden; Supprimé pour éviter les problèmes de disparition */ } /* Assurez-vous que le sous-menu est masqué par défaut */ .wpml-ls-sub-menu { position: absolute !important; top: 100% !important; left: 0 !important; z-index: 1000 !important; } /* Affiche le sous-menu lorsque le curseur est sur l'élément parent */ .wpml-ls-item-toggle:hover .wpml-ls-sub-menu, .wpml-ls-item-toggle:focus-within .wpml-ls-sub-menu, .wpml-ls-item-toggle:active .wpml-ls-sub-menu, .wpml-ls-item-toggle:focus .wpml-ls-sub-menu { display: block !important; } /* Maintient l'affichage du sous-menu lorsque le curseur est sur le sous-menu lui-même */ .wpml-ls-sub-menu:hover, .wpml-ls-sub-menu:focus-within { display: block !important; } /* Gère l'apparition en douceur */ .wpml-ls-sub-menu { transition: opacity 0.2s ease-in-out; opacity: 0; } /* Transition en douceur lorsque le sous-menu est affiché */ .wpml-ls-item-toggle:hover .wpml-ls-sub-menu, .wpml-ls-item-toggle:focus-within .wpml-ls-sub-menu, .wpml-ls-item-toggle:active .wpml-ls-sub-menu, .wpml-ls-item-toggle:focus .wpml-ls-sub-menu, .wpml-ls-sub-menu:hover, .wpml-ls-sub-menu:focus-within { display: block !important; opacity: 1; } Link to a page where the issue can be seen: hidden link
Symptoms:
The language switcher disappears when I hover over another language on both PC and Mobile, making it impossible to select other languages.
Questions:
Why does the language switcher disappear when I hover over another language?
How can I fix the CSS to ensure the language switcher works correctly?
In order to pinpoint the exact issue with the current language switcher, we would need to debug your code, which falls outside the scope of the support we provide here.
Can you please display the issue shown in the screenshots? Testing it on the desktop seems to work fine.
For mobile, you added the language switcher as a shortcode, as far as I can see, and it appeared as a dropdown. Since mobile devices don't have a hover functionality, it's expected that you cannot open it. Have you attempted to add it to the mobile menu?
Thank you for your feedback. When you add the language switcher in WPML → Languages, you should get the same behavior as shown in the screencast. I have also tested this further and made a screencast for you: hidden link.
If the behavior is still not as expected, it could be that your theme styles interfere with the language switcher. You can verify this by temporarily changing the theme to any default theme. If this is the case, you will need to apply custom styles to achieve the behavior you need.
