This applies to your entire menu. For example, Blackbaud’s menu is horizontal at the top of every web page.

This is your main menu. For example, Home, Products, and Services are a part of the main menu on Blackbaud’s website.

This is your main menu in its natural state. For example, you browse Blackbaud’s website, but you are not currently hovering or clicking a menu item.

This applies to a main menu item when a user hovers the cursor over it. For example, when you hover the mouse over Blackbaud’s Products menu item, the menu button changes to a darker shade of grey.

This affects a main menu item after a user clicks it. For example, when you click Blackbaud’s Products menu, you land on the Products page and the Products menu button has a bright yellow background to indicate it is for the current web page.

This applies to your popup menu. For example, when you hover over Blackbaud’s, Products menu, a popup menu appears with menu items such as Fundraising, Forms, and Solutions by Industry.

This is your popup menu in its natural state. For example, you hover over Blackbaud’s Products menu to view the items on the popup menu for it, but you are not currently clicking or hovering over a popup menu item.

This applies to a popup menu item when a user hovers over the popup menu item. For example, you hover your mouse over Blackbaud’s Fundraising popup menu item. When you do this, the popup menu button changes to a lighter shade of blue.