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

Tips for creating a responsive iframe without relying on aspect ratio assumptions

Is there a way to create a responsive iframe without relying on a fixed aspect ratio? The width and height of the content are unknown until rendering. Keep in mind, using Javascript is an option. For instance: <div id="iframe-container"> <i ...

javascripthtmlcssiframeresponsive-design

Rotate the image as you hover your cursor over it

I am trying to implement a script where the image is rotated when the user hovers over it. Unfortunately, the hovering effect is not functioning as expected. $("#alcazar-image").rotate({ bind: { mouseover : function() { $(this).rotate({anima ...

jquerycsstwitter-bootstrap-3hover

Using an image as an onclick trigger for a JavaScript function

I am working on a registration page as part of my university project where users can create an account and store their information in a MySQL database. One feature I'm implementing is the ability for users to select an avatar picture. Below is the co ...

javascripthtmlimageonclickavatar

Improving iframe functionality in AngularJS

I've been experimenting with AngularJS to dynamically update an iframe whenever a query is triggered. It works like this: a query is made, the embed link is fetched from the database, and then it's used in the iframe alongside the title and video ...

javascriptjqueryhtmlangularjsiframe

Utilize JQuery variables for toggling the visibility of various DIV elements

On my webpage's splash page, there are 4 divs but only the home div is initially visible. The other three are hidden. Each of these divs has a button associated with it that triggers a jquery click event to swap out the currently visible div for the ...

javascriptjqueryhtmlcss

Position text input boxes on the right side of the div element

I am seeking help with aligning the text inputs to the edge of .formColumn2 so they appear in a neat line together. I have attempted using margin-right:0 and margin-left, but these solutions end up extending the .formColumn2 div which is not my desired out ...

htmlcssformstextinput

Accordion Box glitch detected in Firefox browser

I have been working on a JavaScript function that controls a slide up/down box. However, I've encountered some issues with Firefox as the box only opens and closes once before failing to work properly again. Upon further investigation, it seems that F ...

javascriptjqueryhtmlcss

Tips for incorporating JavaScript into elements that have been modified using jQuery's .html() method

Consider this example: $('#key').on('click', function(){ $('.task').html("<button id='key'>Button</button>"+Date()); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.j ...

javascriptjqueryhtmlajax

Is it possible to merge string and span elements to create a unified element?

In my current project using React, I am dealing with an array of strings and JSX Elements. For instance, the array has items like: [<span class="name">JCrew0</span>, "edited this document"]. I am attempting to display thes ...

javascripthtmlcssreactjs

<ul><li>issue with indentation

Is there a way to eliminate the indent from my unordered list? While inspecting the element, I noticed what appears to be padding between the width of the box and the content. However, setting padding to 0px and margin to 0px doesn't seem to work as t ...

htmlcss

How to retrieve the current event handler's value with jQuery

To assign an onclick event handler using jQuery, I simply use the following code: $('#id').click(function(){ console.log('click!'); }); Now, my question is how can I retrieve a reference to the function that is currently handling th ...

javascriptjqueryhtml

Is there a way to convert the structure of HTML/CSS into JSON format?

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .collapsible { background-color: #004c97; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text ...

cssjsonhtml

Updating the content of a window without the need to refresh the page using JavaScript

Is there a way to navigate back to the previous window in chat_user without refreshing the entire page when the back button is clicked? Below is the code I have tried: <a href="" onclick="window.history.go(-1); return false;">back</a> ...

javascriptjqueryhtmlcss

Is there a way to locate a file by inputting a partial name?

How can I create a search bar that allows me to find files in a folder (songs) by typing only part of the song name? For example, if I type "he," it should show results like "hello" and "hey." Is there a way to take my input and search for it within file n ...

phphtml

Tips for optimizing HTML5 markup elements to render effectively in Internet Explorer

How can I ensure that HTML5 markup elements such as <header>, <section>, and <footer> are displayed properly in Internet Explorer? I've noticed that when I apply CSS to these elements, the styling doesn't always work as expecte ...

csshtmlcss-selectorsmarkup

Ways to include "working hours" if statement a particular holiday dates are specified

Trying to update the code for an "if statement" to include specific dates that are official holidays when the business is not operational. The current code works if the day falls on Mon, Tue, Wed, Thu, or Fri and the time is between 09:00 and 15:00 in a 24 ...

javascriptjqueryhtmlif-statementtypeerror

Is it possible for jquery to run an entire HTML file using ajax?

Based on information from a discussion on Stack Overflow, it seems that I can utilize the jquery getScript() method to run a remote JavaScript file loaded via Ajax. However, in my specific scenario, the script file is located within an HTML file. Is ther ...

javascriptjqueryhtmlajax

Unlinked from the main content, the Angular2 Material2 sidenav stands on its

I am in the process of implementing the material2 sidenav component. My goal is to have a standalone, full-height sidebar that smoothly slides in and out without any interference with the rest of the app layout caused by the sidenav-layout. The desired ou ...

cssangularlayoutangular2-material

Solving the CSS Trick: Responsive Data Table (featuring inline editing) Display Glitch

In my quest to create a responsive table with inline editing, I turned to Chris's guide at CSS-Tricks (check it out here). To see how it all comes together, take a look at this Plunker demo. On mobile screens, the responsiveness is on point. https: ...

htmlcssangularjsdatatableresponsive-design

Is there any benefit to making the SVG elements width and height 100%?

The Angular Material documentation app features an SVG Viewer that is able to scale the SVG content to fit the container using the following function: inlineSvgContent(template) { this.elementRef.nativeElement.innerHTML = template; if (this.sca ...

javascripthtmlcssangularsvg