This particular item in my navigation menu runs into its sibling despite the negative left margin I give it but funny enough, when I hover over this element or try to alter its position in dev tools, it regains its normal positioning. Same thing happens if I try to shift the next sibling a step further. I’ve tried using floats and setting the relative parent to the li element itself. I also tried triggering hover on document.ready, none of them seems to help my cause.
Running the markup and stylesheets through validators give me no errors so I’m convinced what is going on must be from my logic. Fiddle here https://jsfiddle.net/3kode6e3/1/
PS: Just in case you’re wondering, the styling for that element must be inline as I neither know what future markups might need it nor can begin to edit the files that currently need it.