In my application, I've a selection drop-down in the main top-header menu. Now, I'm a little confused on how I should have on hover for that element. These are the two options:
Option 1: No background color change. Only the text-color will be darken
Option 2: A backgroud-color will be applied
Please, suggest which of the two options is a better one. Or if there's a third even better option?
Such drop-down menus can be designed in many ways,
I would prefer 2nd option for sake of clarity for user.
Once a user hovers seeing the small 'down' arrow, the expectation is set that a menu will drop. And the menu corresponds to that label. Hence, they should look unified and appear single unit. Its possible by changing the color or adding contrasting colors.
Event: Important to choose if you bring down the menu on click event or hover.
The drop-down must adhere to the overall style of the website. The look and feel should be consistent across such menus
The trigger events should not surprise users by frequent changing from hover to /or click.
Also, study the navigation design of UX.SE site, right at the top. You will understand that changing subtle colors of of menu is prompting the users to click and not presenting the menu on hover. Its up to users choice to click or leave.
As I said, I would go with Option 2 but enhancing it a bit.
Dark background
In general when it comes to interfaces it's a good idea to make it obvious at a glance where you are. Using a dark background will make it obvious to you and anyone else who may glance at your screen that you are looking at the "Athi Net Solutions" menu item.
I would also fix the width of the dark background so that the whole menu item has a grey background.
