: 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: The menu on top (work news about media) is a dropdown

@Moriarity648

What happened in the end - and that was a request from the customer, was that we added an overlay on the whole page when the menu is visible.

You can see it in action here: nabilgholam.com/all-projects (the website is now live, finally)

I'm even less sure what to pick as accepted answer, now.

Vote Up Vote Down

@Samaraweera207

Did some experimenting myself, taking many of your ideas in consideration (thanks a lot!)

It seems that somehow connecting the submenu with the menu link helps...



A slight (subtle!) drop shadow could work too...



Maybe a combination of both?



It also seems that having only one bold element in the menu (the hovered element) also helps:



It seems that the problem is not only the backgrounds being confounded, but also that the submenu is (visually) not strongly connected to the menu item.

Vote Up Vote Down

@Harper654

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.






Dropshadow










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











Inverted with gray picked from other text:

Vote Up Vote Down

@Bryan765

So I agree, this is obviously a clean design and you don't want to commit to doing anything craaaazy :)

Rather than a full border like you mentioned in your question, why not do something like this?



Like TunaMaxx said subtle differences are key

So the border is only on the left and the bottom and isn't much more than a 2px line, you could use the grey shade that you're using for the text, the blue from the menu or a little darker, either choice should work. The text is a little larger and a little darker. Also around the half border I suggest leaving some white space (maybe 10-15px) that way you won't have any words from the page beneath the menu seeming like they are trying to climb onto it. (as you can see here '2010' is a little close to 'intitutional' this is why I would creat more white space)

There is a little tidying to do there but I think the idea would work.

Just to mention it's still right aligned and stuff in Chrome though I gather from the comments that you already know that.

Good luck with your site :)

Vote Up Vote Down

@Carla748

Design is subjective of course, but for me there is no priority of information. When you open the menu items, there is nothing little to differentiate from the base page:


Font is effectively the same size, color, weight
Background is the same color
The menu child items almost align with the underlying grid.


I understand the minimalist, clean approach. As I think you already feel, at least in the menu it has been take too far.

Try:


Slightly different background color on menu child items. We're talking #eee versus #fff
Subtle box-shadow on menu child items to gently suggest a layer or depth
Font color something like the active / hover state color
Some sort of indicator on child items with nested child items.

Vote Up Vote Down