[Solved] dropdown menu hover acting weird

[arnaudfabs]

Hi all,

I am using Zurb Foundation for this project. I am almost done but I have an issue with a li in the menu. If you go hover the “find a Store” you will see what it is. it is a CSS issue for sure but i can’t find why it is acting that way.

Please go to http://staging.yowzafitness.com

I have a codepen but it does not really make sense since you can see the live “staging” site but there you go: http://codepen.io/arnaudfabs/pen/YXezdw

Thanks for your help!

[arnaudfabs]

Thank you Atelierbram!

[class*=”fi-“] {
display: inline-block;
}

This worked great! Yes there is still that weird border… the last CSS does not remove it… but i am already happy for the first fix!!

Also, have you seen that if you click on the menu that has a dropdown, the mega drop down loses somehow a padding… I do not know how to fix this.

Thank a lot!

[arnaudfabs]

Ah! You made me search for BEM… I do not know what it was.

I am new to foundation and tweaking other people CSS… and that is how they code their nav-bar. Is that considered BEM? It really gives me headaches since i am not native english and it’s not my code ;)

BTW, i removed the declaration and it fixed the “find a store”! You’re a genius!!

For the menu drop down:
Let me make it clearer, when you hover a menu that has a dropdown (with the arrow down) stay on it and click on it (that has no link btw) and then move the cursor away, the mega dropdown menu look weird, it loses a padding somehow.

[arnaudfabs]

Amazing! It works perfectly! I created that declaration and added the shadow and the background color as well. Thanks so much!

[arnaudfabs]

Do you use Chrome Dev tools or firebug or something else? You seems to be able to see way more than me because i can’t see the hover states in these.

[arnaudfabs]

wow. You made my day really! Thank you so much

[Author]

Posts