Problem Statement

Build a menu bar that meets the following requirements:

• Displays as a horizontal bar on screens wider than 600px.
• Stacks menu items vertically when the viewport width is 600px or less.
• Contains at least three menu items.
• Each menu item has a hover effect that changes its background color.

Solution

Explanation:

• Structure & Layout:

  • The menu is built as an unordered list (<ul>) with the class .menu, where each list item (<li>) represents a menu item.
  • Flexbox (display: flex) is used to create a horizontal layout by default.

• Responsive Behavior:

  • A media query with @media (max-width: 600px) changes the flex direction to column, stacking the menu items vertically on small screens.

• Styling and Hover Effects:

  • Each menu item is styled so that links (<a>) display as block-level elements with padding, centered text, and white color.
  • A hover effect is added using the :hover pseudo-class, which changes the background color for visual feedback.

This solution meets all the challenge requirements by providing a responsive, interactive menu bar with a clear layout adjustment based on the screen width.