Display: None vs Visibility: Hidden for Dropdown Menus

When designing multi-dropdown menus, developers often encounter situations where the second and third levels of the menu need to remain hidden until a user interacts with the parent menu. Two common CSS methods to achieve this are using display: none or visibility: hidden, and each has distinct behavior, pros, and cons.

Method 1: Using display: none

In this approach, the submenu is initially hidden using the display: none property. When the user hovers over the parent menu item, the display property is set to block or another appropriate value.

Example CSS:

/* Default state: submenu hidden */
.submenu {
  display: none;
}

/* On hover: submenu displayed */
.parent:hover .submenu {
  display: block;
}

How It Works:

• When display: none is applied, the submenu is completely removed from the document flow.
• On hover, the submenu is reinserted into the flow and becomes visible.

Pros:

1. Performance: Because the submenu is not rendered at all when hidden, it does not consume rendering resources.
2. Accessibility: Screen readers will not detect elements with display: none, which can be beneficial if the hidden content is irrelevant until interaction.
3. No Layout Impact: The hidden submenu does not affect the layout of surrounding elements.

Cons:

1. Transition Limitations: Animating the appearance of a display: none element is not straightforward, as display is not animatable.
2. Reflow: Adding the submenu back to the document flow on hover can trigger a reflow, potentially causing performance issues with complex layouts.

Method 2: Using visibility: hidden

In this approach, the submenu is initially hidden using the visibility: hidden property. When the user hovers over the parent menu, the visibility property is set to visible.

Example CSS:

/* Default state: submenu hidden */
.submenu {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}

/* On hover: submenu visible */
.parent:hover .submenu {
  visibility: visible;
  opacity: 1;
}

How It Works:

• When visibility: hidden is applied, the submenu remains in the document flow but is invisible.
• On hover, the submenu becomes visible while retaining its position in the layout.

Pros:

1. Smooth Animations: visibility works well with opacity transitions, enabling smoother animations when revealing the submenu.
2. No Reflow: Since the submenu stays in the document flow, no reflow occurs when it becomes visible.

Cons:

1. Layout Impact: The hidden submenu still occupies space in the layout, which can cause gaps or unexpected behavior.
2. Accessibility Issues: Screen readers may still detect elements with visibility: hidden, which could confuse users if the content is irrelevant until interaction.
3. Performance: Keeping hidden elements in the document flow may consume more resources compared to display: none.

Comparison Table

Which Method to Use?

1. Use display: none if:
   • You need to completely hide the submenu from all users and assistive technologies.
   • Performance is critical and you want to minimize rendering overhead.
2. Use visibility: hidden if:
   • Smooth transitions or animations are essential to the design.
   • The submenu’s position in the layout is important and should not be removed.

Best Practices

• Combine both methods for the best of both worlds. For example, use visibility: hidden with opacity for animations and a fallback to display: none for non-hover states to ensure accessibility and performance.
• Always test menus for both visual and screen reader accessibility to ensure a consistent and inclusive experience.
• Consider the overall complexity and performance implications of your menu system when choosing a method.

In modern web development, the choice between display: none and visibility: hidden depends on the context and the priorities of the project. Both methods have their place, and understanding their nuances ensures you make the best decision for your application.