Submenu

The submenu we will be implementing appears when we hover over a menu item. It looks as if it’s extending out of the menu item, but it’s actually just an overlay that stays in the same position regardless of the hovered item. The appearance of connectivity is given by the hovered menu item background matching that of the submenu.

So with that, let’s create this overlay to show up for now. Nothing fancy, just a div with some width and height.

Something that I like to do while tweaking CSS – especially positioning and sizing – is to liberally give color to things that take up space. For example, the default white background and the overlay are similar in color (along with the menu colors), so to avoid any confusion, we’re just going to paint the background blue and the overlay red for now. This makes it abundantly clear the space that each element takes up.