CSS Issue with Navigation Menu - 4 level+

Open on Drupal.org →

Created on 13 February 2025, 2 months ago

Updated 23 February 2025, 2 months ago

Problem/Motivation

I found a CSS issue when it comes to having 4th level menu items/children. When you add that fourth level with multiple children, all menu items beneath the parent (3rd level menu item) get pushed down the height of the 4th level children dropdown. When you have the hover command set, it makes it impossible to click on any third level item below the parent because as soon as your mouse goes below the parent (third level menu item), the menu moves that item back up the menu. Your mouse is now longer on the menu so it closes

It would be easier to just show in an example :

Create a menu with with 4 levels as so:
- Fruit
  - Apple
    - Red Apple
      - Gala
      - Delish
    - Green
Place you curser on the Red Apple (3rd level). The fourth level will appear but the green menu item will be pushed down the height of the 4th row. Note the menu item arrow location for Red Apple its no longer flush. If you are using the hover option for the menus, it is impossible to click on Green. As soon as you move your cursor off of Red Apple, its children are no longer loaded and the Green item is moved back up to the menu, thus your cursor is no longer on the menu so it closes.

Steps to reproduce

Create a menu with with 4 levels as so:
- Fruit
  - Apple
    - Red Apple
      - Gala
      - Delish
    - Green

Proposed resolution

The 4th level+ should function just like levels 1-3 for the main navigation in the way children are displayed.

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report

Status

Active

Version

1.0

Component

User interface

Created by

Live updates comments and jobs are added and updated live.

Incomplete comments

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Comment 2 months ago →
🇮🇹Italy apaderno Brescia, 🇮🇹
Comment 2 months ago →
🇺🇸United States flashwebcenter Austin TX
Hello,

Solo theme does not support four level menu.
https://www.drupal.org/project/solo/issues/3439615 ✨ Enhancing Solo Theme: Integrating Fourth-Level Into Primary Menu Closed: works as designed
https://www.drupal.org/project/solo/issues/3508038 💬 Menu design improvement Active

Best wishes,
Alaa
Comment 10 days ago →
🇺🇸United States flashwebcenter Austin TX
Hello,

Based on valuable feedback from the Drupal community, Solo officially will supports fourth-level navigation menus in the next release.

Why This Matters
Many users requested the ability to create deeper, more complex menu structures — especially for large sites with multi-level content hierarchies, product catalogs, or mega menu requirements.

Previously, Solo focused on a clean, accessible 3-level menu structure, optimized for performance and simplicity. However, after carefully evaluating real-world use cases and listening to user feedback, fourth-level menu support has been added — with full consideration for:

Accessibility best practices (ARIA roles, keyboard navigation)

Responsive behavior on mobile and desktop

Automatic submenu positioning (smart flip logic)

Clean, maintainable CSS and JS handling

RTL (Right-to-Left) language support

Best wishes,
Alaa

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024