WPML Language Selector for social nav

Hi, Peter,
Unfortunately, I can’t share the link because my site is under development. Please let me know which file you’d like to review, and I’ll send you any CSS code relevant to WPML language styling.
Thanks. -MHM-

Hey, that worked! Thanks!

Just need a little help getting it styled:
* When you click the language switcher, the submenu jumps to the left. This makes it hard if you need to scroll to one of the languages toward the bottom of the list.
* I’d like to reduce the amount of space / padding above and below each language because it likewise makes the submenu longer and harder to click.
* Likewise, I’d like to reduce the amount of padding to the left and right of the language names, and maybe reduce the font by one point. The current design makes the submenu longer by pushing some of the language names to a second line.

I tried adjusting some of the pixels you mentioned above but did not see any changes.

One other thing: The language dropdown menu is opening upon hover. I would prefer if it only opened upon click, so that it does not pop up to obscure the main menu when a visitor accidentally moves a mouse over it. Thank you.

Thanks! I added the border you suggested to the left, right and bottom of the first item, and that looks much better. Still running into the other problems though.

Could you please take a look at my site from the private link that I posted earlier in this thread? Your second piece of code did not do anything, but don’t worry about looking at that code because the background color is not the cause of the problem. The dropdown menu is all white, so it’s not a problem that this piece of white space is there. The problem is that the border is about 10px inside of the default language item.

I also do not understand why a line is being created when you click the dropdown button. It pops up to the right of the dropdown menu just below social media navigation menu.

PS – Thank you for the advice regarding mouseover vs. click.

That worked! Just had to figure out one other bit of code to fix the fact that the dropdown part was one pixel to the right of the rest. I fixed it with this:

#top .sub_menu li li a {
margin-left: -1px!important; }

In case anyone else is reading this because they are looking for help with a similar problem, here is the full code we used:

#lang_sel_click {
position: absolute!important;
top: -12px!important;
left: -150px!important; }

#lang_sel_click a, #lang_sel_click a:visited {
line-height: 10px!important; } 

#lang_sel_click li { width: 150px!important; } 

#lang_sel_click .sub_menu li ul {
top: 26px!important;
left: 0%!important;
border-top: none!important; } 

#top .sub_menu li ul { left: 0%!important; 
top: 31px!important; } 

#top .sub_menu li li a { line-height: 22px!important; padding: 3px 10px!important; font-size: 11px!important; border-top: none!important; margin-left: -1px!important; } 

#top .sub_menu li li:first-child > a {
border-bottom: solid 1px #cdcdcd!important; 
border-left: solid 1px #cdcdcd!important; 
border-right: solid 1px #cdcdcd!important; } 

.header_color .sub_menu ul { background-color: #f8f8f8!important; } 

#top .sub_menu li ul { width: 151px!important; } 
#lang_sel_click li { padding-left: 0!important; } 

Thanks again for all the brilliant coding help! :)