Create a dynamic layout with two navigational sub-menu blocks positioned side by side

When I hover over a navigation menu item, it brings up 6 sub menu items. I want these sub-items to appear in two blocks of 3 that are adjacent to each other.

I tried using display: flex on the parent element .menu-item-1, but it doesn't seem to be working as expected. Any ideas why?

I am required to use li elements for this task and any help in understanding why it's not working properly would be greatly appreciated.

Currently, the 6 sub menu items are stacked on top of each other, making it look like there are only 3 items visible at once.

To see the code in action, visit the following link: https://codepen.io/emilychews/pen/LwPvbq

li {list-style-type: none}
  
ul.nav-menu-items {
  display: flex;
  justify-content: flex-start;
}
  
.menu-item {
  list-style-type: none;
  position: relative;
  padding: 2rem 1rem 2rem 1rem
}

.menu-item-1 {
  display: flex;
}

/* SUB MENU */

.submenu {
  position: absolute;
  background: lightblue;
  padding: 1rem;
  top: 5rem;
  visibility: hidden;
  width: 22rem;
}

.submenu-item {
  padding-bottom: .5rem;
}

.submenu-item:last-child {
  padding-bottom: 0;
}

.menu-item:hover .submenu {
  visibility: visible;
  opacity: 1;
}
<ul class="nav-menu-items">
    <li class="menu-item menu-item-1">MENU-ITEM
        <ul class="submenu pratice-areas-submenu-1">
            <li class="submenu-item submenu-item-1"><a href="./" class="navigation--link">SUB MENU ITEM</a></li>
            <li class="submenu-item submenu-item-3"><a href="./" class="navigation--link">SUB MENU ITEM</a></li>
            <li class="submenu-item submenu-item-5"><a href="./" class="navigation--link">SUB MENU ITEM</a></li>
        </ul>
        <ul class="submenu pratice-areas-submenu-2">
            <li class="submenu-item submenu-item-1"><a href="./" class="navigation--link">SUB MENU ITEM</a></li>
            <li class="submenu-item submenu-item-3"><a href="./" class="navigation--link">SUB MENU ITEM</a></li>
            <li class="submenu-item submenu-item-5"><a href="./" class="navigation--link">SUB MENU ITEM</a></li>
        </ul>
    </li>
</ul>

htmlcsslistflexbox

Answer №1

The CSS property position: absolute; applied to the class .submenu is causing the elements within the classes .pratice-areas-submenu-1 to be hidden behind those in .pratice-areas-submenu-2. One simple solution could be adjusting the placement by using left: 150%; on .pratice-areas-submenu-2.

Alternatively, you can resolve this issue by removing position: absolute from .submenu and replacing it with 

margin-top: 2rem; transform: translate(-6rem);
. There are various other methods that can also address this problem effectively.

Answer №2

+1 for the explanation provided by @waleed Iqbal on why it's not working.

Personally, my approach to solving this issue would involve creating a submenu-container, positioning it absolutely, and using display flex.

li {list-style-type: none}
  
ul.nav-menu-items {
  display: flex;
  justify-content: flex-start;
}
  
.menu-item {
  list-style-type: none;
  position: relative;
  padding: 2rem 1rem 2rem 1rem
}

.menu-item-1 {
 // display: flex;
}

/* SUB MENU */

.submenu-container {
  position: absolute;
  top: 5rem;
  display: flex;
}
.submenu {
  background: lightblue;
  padding: 1rem;
  visibility: hidden;
  width: 22rem;
}

.submenu-item {
  padding-bottom: .5rem;
}

.submenu-item:last-child {
  padding-bottom: 0;
}

.menu-item:hover .submenu {
  visibility: visible;
  opacity: 1;
}
<ul class="nav-menu-items">
    <li class="menu-item menu-item-1">MENU-ITEM
      <div class="submenu-container">
        <ul class="submenu pratice-areas-submenu-1">
            <li class="submenu-item submenu-item-1"><a href="./" class="navigation--link">SUB MENU ITEM</a></li>
            <li class="submenu-item submenu-item-3"><a href="./" class="navigation--link">SUB MENU ITEM</a></li>
            <li class="submenu-item submenu-item-5"><a href="./" class="navigation--link">SUB MENU ITEM</a></li>
        </ul>
        <ul class="submenu pratice-areas-submenu-2">
            <li class="submenu-item submenu-item-1"><a href="./" class="navigation--link">SUB MENU ITEM</a></li>
            <li class="submenu-item submenu-item-3"><a href="./" class="navigation--link">SUB MENU ITEM</a></li>
            <li class="submenu-item submenu-item-5"><a href="./" class="navigation--link">SUB MENU ITEM</a></li>
        </ul>
      </div>
    </li>
</ul>

Check out the pen.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The component next/image is experiencing issues when used in conjunction with CSS

I struggled to create a border around an image because the custom CSS I wrote was being overridden by the Image component's CSS. Despite trying to leverage Tailwind and Bootstrap to solve the problem, my efforts were unsuccessful. Now, I am at a loss ...

javascriptcssnext.jsnextjs-image

The error message "TypeError Cannot read properties of undefined (reading 'backdrop') - bootstrap v5.2.1 modal" is indicating that there is an

While working with the bootstrap modal, an error has been encountered ( TypeError Cannot read properties of undefined (reading 'backdrop') ), which has been logged in our bug tracker. However, attempts to replicate this error have been unsuccessf ...

javascripthtmlbootstrap-5bootstrap5-modal

Is there a simpler method to enable built-in CSS-Sass in Next.js without the need for excessive configuration?

Is there a way to maintain the built-in CSS/SASS feature in Next.js without extensive configuration? Utilizing the built-in CSS/SASS is convenient, but introducing less to next.config.js triggers the disabling of this feature, requiring manual configurati ...

csswebpacksasslessnext.js

How to create a full-width and full-height background image in a div using CSS

When using a bootstrap template, I encountered an issue with adding an image as a background. Here is the CSS code: background:url(../images/banner.png) no-repeat; background-size: 100%; The problem with these CSS rules is that the image gets clipped and ...

jqueryhtmlcssimagetwitter-bootstrap

Unable to scroll when utilizing ng-html-bind functionality

My device specifications: $ ionic info Your system details: Cordova CLI: 6.2.0 Gulp version: CLI version 3.9.1 Gulp local: Ionic Framework Version: 1.2.4 Ionic CLI Version: 2.0.0 Ionic App Lib Version: 2.0.0-beta.20 OS: Distributor ID: LinuxMint Desc ...

javascripthtmlcssangularjsionic-framework

Alter the status of a checkbox programmatically

There are two checkboxes available: <input type="checkbox" id="id3"></input> <input type="checkbox" id="id4"></input> The desired functionality is that when clicking on id3, id4 should also be checked. Initially, this works as e ...

javascriptjqueryhtml

How can I effectively showcase the content of a text file in HTML using Flask/Python?

Let's discuss the process of displaying large text/log files in HTML. There are various methods available, but for scalability purposes, I propose taking a log file containing space-separated data and converting it into an HTML table format. Here is ...

pythonhtmlflaskjinja2

Unusual patterns appearing in HTML image files

As a beginner in html, please pardon my silly questions and mistakes. I have designed this webpage: <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <style type = text/css> #topbar { ...

htmlcssimagepixel

What is the best approach to managing categorical variables with Flask?

After developing a machine learning model to classify a target variable Y based on predictors x1, x2, x3, and others, I needed to create an HTML form "calculator" for users. The form requires the user to input data for x1, x2, x3, etc., and then displays t ...

pythonhtmlmachine-learningflaskcategorical-data

Explore the contents of a list to find a specific element nested within it

Utilizing a Linq query for searching, I have a list called productList on which I am conducting the search, and within this list, there is another list named IQProductSkuList. My goal is to search within the entire retrieved data, but when I try to search ...

c#asp.netasp.net-mvclistlinq

Checking the Length using JQuery

My dilemma is with a text field (datepicker) - I want the button to change color when someone selects a date, but it's not working. Can you please assist me? HTML <input type="text" id="datepicker"> <button type="button" onclick="" class=" ...

jqueryhtmlcss

The jQuery carousel script is not functioning

Currently developing a jQuery slideshow for my website, and I stumbled upon a code that fits my requirements perfectly. I made some adjustments to the code from this source: . My specifications were that the code should be created from scratch, lightweight ...

javascriptjqueryhtmlslideshow

Ways to incorporate encoded HTML text into string literals

When attempting to insert a HTML encoded special character within a string literal, I am encountering an issue where it does not display as intended in the final document. The approach I am taking is as follows: const head = { title: `${ApplicationName} ...

javascripthtmlencoding

Utilizing Piwik Analytics in jQuery Mobile Framework

Having an issue with tracking users on my mobile Web App using Piwik. Due to AJAX, only views on the first page are being tracked. I attempted to use the pageinit function to load the Piwik tracking script on every page, but it still only tracks the firs ...

javascriptjqueryhtmljquery-mobilematomo

Adjust the transparency of CSS elements using a jQuery selector

I am developing a grid of brand thumbnails with interactive icons. When one of the icons is hovered, I want all the icons to change opacity and become visible. Here is the current HTML structure: <div id="brands-wrapper"> <img class="brands" ...

jquerycssopacity

Is there a way to display the true colors of a picture thumbnail when we click on it?

In my project, I attempted to create a dynamic color change effect when clicking on one of four different pictures. The images are displayed as thumbnails, and upon clicking on a thumbnail, it becomes active with the corresponding logo color, similar to t ...

javascripthtmlcssvue.js

Make sure that bootstrap is set to disregard the taller column heights

Is there a method to manipulate Bootstrap so that the first column of the second row is positioned just below the height of its corresponding column in the previous row? At present, each row adjusts its height based on the tallest column. <div class=&q ...

htmlbootstrap-4bootstrap-5

Encountered SyntaxError: An unexpected token has been found while integrating leaflet with flask

Despite adding all necessary scripts and configuring my API_KEY in config.js, I keep getting an error message saying "Uncaught SyntaxError: Unexpected token." I have double-checked my API key multiple times, and it seems to be correct. Here is a snippet f ...

javascripthtmlcss

What is the best way to center the startIcon material ui icon?

I'm having trouble keeping the icon button centered on my page. When I add left: "0.5rem" to the sx prop, it ends up pushing the button icon even further away from center. I'd prefer not to use makeStyles to manually override the position. Any ad ...

cssreactjsmaterial-ui

Experiencing difficulties in arranging Bootstrap columns based on media queries

I am creating a layout for a website that requires 4 columns. When the screen is in desktop mode or wider than tablet width, it should show all 4 columns with the outer 2 being used for padding only. However, in mobile mode, the outer 2 columns should di ...

cssbootstrap-4media-queriesxhtml