How to separate a dropdown from the page background when it’s the same color?

To get straight to the point, this is causing trouble:

enter image description here

The menu on top (work news about media) is a dropdown menu. The problem is that it has a white background, and the page is also white, and the text colors match too. This results in a weird, disconcerting and un-esthetic effect when the drop down rolls down over the page contents.

The design is minimalist, uses only two colors and not many elements. This dropdown looks real good on a non-white background, such as on this page.

So, we’re pondering ways of separating it from the background.

A border is an obvious solution, another pondered solution is reducing the opacity of the whole page when the dropdown is activated.

Is there any other way?

Edit: Removed the original link because the design is being updated. Will keep you updated…


Agree on the subtle differences. Since your site does not seem to be a fan of drop shadows, i shall only mention that once 🙂

Basically, what I would do, is simply play around with inverting the colours you already have. In the case of the dark blue, I would obviously go easy; a same colour a good deal weaker. Here are a few experiments. Pardon the very crude execution, but hope I get the idea across. Please note that these are just general ideas, and does not look very good. If you fiddle with the concept,though, I am sure you will come up with something good.


enter image description here

Inverted blue background (colour piced from the “nabil gholam..”)

enter image description here

Inverted with gray picked from other text:

enter image description here

Source : Link , Question Author : Rolf , Answer Author : benteh

Leave a Comment