After working in web development for a while, you think you’ve seen it all. Until…you realize you haven’t. While developing a unique solution for the overlay menus on Rhoades McKee, Daniel and I had the privilege of learning something new about the quirkiness of CSS. Follow along as we guide you through this CSS mishap and our steps for internal problem-solving.

Creating the Fade In 

Now, if you’re reading this on a desktop browser, click the “What We Do” menu at the top of the Rhodes Mckee homepage. You’ll see we created an engaging effect for the menu by sliding it down from the top of the page. However, after doing so, it still appeared to be missing something. To further elevate the menu and bring a more polished feel, we added a simple fade in down effect by using the  * CSS selector (lazy, but in this case, it worked). The animation combined the transform CSS property with the translateY value to create the effect. So when selecting any of the service areas (Real Estate Law, for example) in the menu, a sub-menu will open to the right of the clicked element. Looks great, right?

Correcting the Position 

Well, here’s the issue: the client was looking for the red element to line up with the top of the green element. But for some reason, we could only get the red element to line up with the blue element. This was because of the transform property that was applied to every element from the animation. By placing a transform property with a translate value on an element, you create a pseudo-relative positioning, which would be the same as using the position: relative; CSS property / value.

Planning for the Future 

Luckily for us, we were able to remove the animation from all of the elements in the cascade until we aligned the submenu with its relative element. And thus, fixing the issue. Now, what’s the good news? Well, whenever something like this happens, you learn from it. If the issue occurs again months down the road, we’ll find the answer saved in a note—or written in a blog somewhere. Undoubtedly, this is our note for future reference.

Have you experienced any unexpected CSS setbacks? Share them with us!