Firefox: floating element in dropdown showing wrong

Question

See here: codepen.io/arnaudfabs/pen/waXWJLenter code here

I am using Zurb Foundation 5 to build a mega menu. I need the item name and its price on the same line for each product.

I added a span float right for the price and it shows well on Chrome and IE.

In Firefox, the price is going out of the li tag and is not even clickable.

See pictures:

Good:

Bad:

Any thoughts on what to do?? Thanks!

Answer 1

Removing the style white-space: nowrap; on .top-bar-section .dropdown li a seems to fix your problem in FireFox.

or just override it like this:

.top-bar-section .dropdown li a{
    white-space: normal;
}