The Item management is part of a dropdown menu and the Author is part of a heading list. But since both have the same black background, it looks like Item management and Author are part of the same menu. I want to make them look distinct. I want the user to see Item Management as part of drop down menu and Author as part of the heading list.
Basically I don't want the two backgrounds to merge. Any help or idea is much appreciated.
Option 1: It is same color. With opacity of 95% and box-shadow for below bar.
Option 2: Just box-shadow of light grey color.
You could do a few things:
I would personally change the background color to a slightly lighter shade of the same color and add a drop shadow for visual depth. You basically need some sort of distinguishing barrier (like a border or a drop shadow or both).
Other than that, the differing the typefaces (as you have) is a good idea. Unless you are willing to redesign your page or make the dropdown shorter, I see no other simple solutions.
As you are not in control of the colors and border-color (this would probably be the best option if you could enter there), changing the shadow (which you already have) color to a lighter might look weird (but test it it might be a good idea) and to a darker will not be noted; I can only suggest to use some kind of light layout to cover the page when the menu expands:
Other way to think about this solution is that the page opacity went a bit lower, excluding the header or menu.
If you can't change background color of your menu then try some different font type for it. Try to separate main menu item and dropdown menu items lists. Do change with font style. Apply different dropdown effect while user click on main menu item. Hope it helps...
If you are bound to keep the same colors and styling than the simplest option would be to increase the height of your dropdown till the bottom of the header, that will hide the header label.
