How can you create a dropdown menu in CSS?

Creating a dropdown menu in CSS often involves using nested lists combined with CSS for controlling the visibility of the dropdown elements. This technique takes advantage of the structure of lists, where a parent list item can contain a child list that acts as the dropdown.

In this approach, a unordered list (<ul>) is created, and within it, another unordered list is nested inside a list item. To achieve the dropdown effect, CSS is used to set the nested list to be hidden by default (with properties like display: none; or visibility: hidden;) and then shows it when the parent item is hovered over. This method is efficient because it leverages existing HTML elements and CSS styling, ensuring compatibility across different browsers without needing JavaScript.

Other options provided don't adequately utilize CSS or the HTML structure required for a dropdown menu. Relying solely on hidden divs and JavaScript adds complexity and is not necessary for this specific task. Applying hover effects to buttons may enhance interactivity but does not create a full dropdown menu functionality. Manipulating the display property of images does not pertain to creating dropdown menus and does not use the necessary HTML elements for such a structure.