Ensure that the sub menu and sub-sub menu are aligned to the same height

My goal is to have a drop-down menu with 3 Levels where the SubMenu and Sub-SubMenu are of equal height. The number of items in each column (Sub Menu and Sub-Sub Menu) should not affect their height.

Below is the HTML and CSS code that I am using:

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  margin: 0px;
  padding: 0px;
}

#main {
  max-width: 1000px;
  margin: 0 auto;
}

#menu:after {
  content: "";
  clear: both;
  display: block;
}
...

<div id="main">
  <nav id="menu">
    <ul>
      ...
    </nav>
</div>

Here is an image example of what I want to achieve: https://i.sstatic.net/eoClG.jpg

Thank you for your assistance!

javascriptjqueryhtmlcssdrop-down-menu

Answer №1

To tackle the issue at hand, I resorted to using jQuery since a pure CSS solution wasn't immediately evident. Keep in mind that this is just one potential approach.

My strategy involved iterating through each 1st level <li> element and determining the tallest <ul> within it. Subsequently, I set the height of all <ul> elements within that <li> to match the computed tallest value.

The JavaScript script utilized for this purpose can be found below (you can also refer to this resource: Use jQuery/CSS to find the tallest of all elements):

$("#menu > ul > li").each(function(){
  var maxHeight = 0;
  var myUl=$("ul", $(this));

  myUl.each(function(){
    maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
  });

  myUl.height(maxHeight);
});

In terms of CSS adjustments, I employed visibility: visible & hidden to calculate the height of the <ul> elements, replacing your initial display: none & block.

This encapsulates all the code in action. Hopefully, you find it beneficial. :)

$("#menu > ul > li").each(function(){
  var maxHeight = 0;
  var myUl=$("ul", $(this));
  
  myUl.each(function(){
    maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
  });

  myUl.height(maxHeight);
});
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  margin: 0px;
  padding: 0px;
}

#main {
  max-width: 1000px;
  margin: 0 auto;
}

#menu:after {
  content: "";
  clear: both;
  display: block;
}

#menu {
  background-color: #000;
}

#menu ul {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}

#menu ul a {
  display: block;
  color: #231F20;
  font-size: 12px;
}

#menu ul li {
  float: left;
  margin: 0;
  padding: 0
}

#menu ul li.current {
  background: #ddd
}

#menu ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  border: 1px solid #4598cc;
  padding: 20px 0px;
  z-index: 5;
  display:block;
  visibility:hidden;
}

#menu ul ul li {
  float: none;
  width: 200px;
  padding: 5px 10px;
}

#menu ul ul a {
  color: #4598cc;
  display: block;
  padding: 5px 0;
  font-style: 14px;
  font-family: FFMarkStdBook;
}

#menu ul ul ul {
  top: -1px;
  left: 100%;
  height: auto;
}

#menu ul li:hover>ul {
  visibility:visible;
}

#menu>ul>li {
  float: left;
  margin-right: 47px;
  position: relative;
}

#menu>ul>li:last-child {
  margin-right: 0px;
}

#menu>ul>li>a {
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  padding: 10px;
  text-decoration: none;
}

#menu>ul>li>ul b {
  color: #4598cc;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: normal;
}
// Script src link to jQuery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
// Main navigation menu html structure
<div id="main">
  <nav id="menu">
    <ul>
      // Menu items go here...
    </ul>
  </nav>
</div>

Answer №2

It's recommended to reorganize your HTML structure.

The .dropdown class was included for easier targeting.

Is this the desired outcome?

Check it out here!

<div id="main">
  <nav id="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a>
        <ul class="dropdown">
          <li><a href="#">Link One ></a>
            <ul class="dropdown">
              <li><a href="#">Child Link One</a></li>
              <li><a href="#">Child Link Two</a></li>
              <li><a href="#">Child Link Three</a></li>
              <li><a href="#">Child Link Four</a></li>
              <li><a href="#">Child Link Five</a></li>
              <li><a href="#">Child Link Six</a></li>
            </ul>
          </li>
          <li><a href="#">Link Two ></a>
            <ul class="dropdown">
              <li><a href="#">Child Link Seven</a></li>
              <li><a href="#">Child Link Eight</a></li>
            </ul>
          </li>
          <li><a href="#">Link Three ></a>
            <ul class="dropdown">
              <li><a href="#">Child Link Nine</a></li>
              <li><a href="#">Child Link Ten</a></li>
              <li><a href="#">Child Link Eleven</a></li>
              <li><a href="#">Child Link Twelve</a></li>
              <li><a href="#">Child Link Thirteen</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Projects</a>
        <ul class="dropdown">
          <li><a href="#"> Link One</a>
            <ul class="dropdown">
              <li><a href="#">Child Link Fourteen</a></li>
              <li><a href="#">Child Link Fifteen</a></li>
              <li><a href="#">Child Link Sixteen</a></li>
              <li><a href="#">Child Link Seventeen</a></li>
              <li><a href="#">Child Link Eighteen</a></li>
            </ul>
          </li>
          <li><a href="#"> Link Two</a></li>
          <li><a href="#"> Link Three</a></li>
        </ul>
      </li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>


html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  margin: 0px;
  padding: 0px;
}

#main {
  max-width: 1000px;
  margin: 0 auto;
}

#menu:after {
  content: "";
  clear: both;
  display: block;
}

#menu {
  background-color: #000;
}

#menu ul {
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0
}

#menu ul a {
  display: block;
  font-size: 12px;
  text-decoration: none;
}

#menu ul li {
  margin: 0;
  padding: 0;
  display: block;
}


#menu .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
}

#menu .dropdown li {
  width: 200px;
  display: block;
  background-color: gray;
  border-bottom: 1px solid black;
}

#menu .dropdown > li > a {
  font-style: 14px;
  padding: 5px;
  color: white;
  font-family: FFMarkStdBook;
}

#menu .dropdown .dropdown {
  top: 0;
  left: 100%;
  height: 100%;
}

#menu ul li:hover > .dropdown {
  display: block
}

#menu>ul>li {
  float: left;
  margin-right: 47px;
  position: relative;
}

#menu>ul>li:last-child {
  margin-right: 0px;
}

#menu>ul>li>a {
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  padding: 10px;
  text-decoration: none;
}

#menu>ul>li>ul b {
  color: #4598cc;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: normal;
}

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

What is the best way to identify a specific list item from a dropdown menu and determine its position on

Check out my jsfiddle for reference. My goal is to calculate scores based on different options selected, specifically relating to radiation types. I'm struggling with assigning a score to each type of radiation and integrating the drop-down menu selec ...

javascriptjqueryselectrangehtml-lists

Access a JSON value in the Google Sheets script editor and retrieve the data

I'm trying to retrieve a value from a JSON object by making an API call in a Google Sheet. Below is the script I am using: function getBitcoinPrice() { var url = "https://acx.io//api/v2/tickers/btcaud.json"; var response = UrlFetchApp.fetc ...

javascriptjsongoogle-apps-scriptgoogle-sheets

What is the best way to personalize the collector for each individual?

Currently, I have a bot that is capable of collecting messages and replying if it detects a specific word. However, I am facing an issue where the bot keeps creating new collectors every time someone types the word tekong. As a result, the bot ends up resp ...

javascriptnode.jsdiscord.js

AngularJS- Controllers encountering the issue of $scope being undefined after invoking a function

Currently, I am working on a project that involves creating a website with various links using AngularJS routing. One of these links should only be visible to administrators. User authentication and role information are stored in cookies. Here is the basic ...

javascriptangularjsajaxscope

The CSS flex display is not evenly aligned on the second row

I recently started learning about display: flex, and I'm still trying to get the hang of it. As you can see in the screenshot below, even after removing some content, the last two items are not behaving like the first row. I've tried different th ...

css

Printing in HTML with Angular based on certain conditions

As I cycle through a list of products, I am verifying if the product Id is already included in an array of products (objects). If it is, then I print the quantity. If not, I attempt to print 0. Here is the code snippet I have been working on: <ion-item ...

javascriptangulartypescriptionic4

Tips for notifying highlighted text in Kendo Editor

How can I provide an alert for a selected text inside the kendo editor? I have attempted the code below <textarea id="editor"></textarea> <script> $("#editor").kendoEditor(); var editor = $("#editor").data("kendoEditor"); var html = edit ...

javascriptjqueryangularjskendo-uikendo-ui-angular2

React/Next Component Changes State and Clears it in useEffect

Currently, I am faced with an issue while attempting to fetch data from an API. The problem arises during the rendering process since the useEffect function is being called multiple times. Surprisingly, everything works perfectly fine during the initial pa ...

javascriptreactjsnext.jsreact-hooks

How to choose the desired day within a specific month when creating a calendar from scratch?

Hi there! I need some assistance. I'm currently working on enhancing a calendar by adding an extra feature. The idea is that when the user selects one or more days, those specific day(s) should be highlighted. However, I'm facing an issue where s ...

javascriptreactjs

The alignment of the table header and body becomes misaligned when attempting to freeze the header

I am currently working on making the header visible while scrolling down the page. I managed to achieve this by using display:block; in the CSS for the body element. However, I am facing an issue where the columns of the header are not aligned with the ...

htmlcssbootstrap-4tapestry

What could be the reason why my useRouter function isn't working as expected?

I'm currently working on developing an App using nextjs 13 and the new App router feature (https://nextjs.org/blog/next-13-4) : I've encountered a navigation issue despite following the documentation diligently. To illustrate, here's a bas ...

javascriptnext.jsnext.js13app-router

What is the process for obtaining coordinates and adding a marker based on the city name in a React Native app

Can you retrieve coordinates and place a marker on a city just by its name? I am attempting to get the coordinates of my search value (which is the city). Below is the code I am using with React Native Maps: import React, {useState} from 'react' ...

javascriptandroidreactjsreact-nativegoogle-maps

Having difficulty customizing the icon within the Alert component in Material UI for React by utilizing an external CSS file

I'm struggling to get my code to work properly. I'm currently using MUI to style my components with a separate CSS file. I'm attempting to style an Alert component, specifically focusing on the alert icon, but I'm having trouble getting ...

cssreactjsmaterial-ui

Error in React UseTable: Attempting to read properties of an undefined object (specifically trying to use a forEach loop)

https://i.stack.imgur.com/ZSLSN.pngHaving an issue here that I need some quick help with! Whenever I attempt to render data into a React table, I encounter the error mentioned above. The data is fetched from an API using Axios. Let's take a look at t ...

javascriptreactjsnext.jsreact-table

Challenges with transitioning from Bootstrap 3 to Bootstrap 4 grid system

By utilizing Bootstrap 3.3.7, I managed to "row span" a div across multiple rows and utilize the remaining column space for other divs. Below is an example using this code: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.m ...

htmlcssbootstrap-4twitter-bootstrap-3

Unable to align divs horizontally

On my webpage, I have set up two divs - Box1 and Box2. Within Box2, there are two nested divs called Box2-1 and Box2-2. However, when I view the page, Box1 and Box2 do not align side-by-side as expected. Instead, Box1 moves downwards and lines up with the ...

htmlcss

Passing back two variables within the ajax success function

Is it possible to create a function that retrieves both the parcel number and the number of comments at once? Currently, I have two separate SQL queries that return different results. I want to be able to display the APN number in a label and show the coun ...

phpjqueryajax

How can you pick the element that is nearest to the top of a window?

My goal is to have a fixed list of page sections on the side that highlights the link of the section you're currently viewing as you scroll through the page. This is the code I've come up with: $(document).scroll(function(){ $allSections = $(&a ...

javascriptjquery

Show input fields in a row

In an attempt to align my select form fields on the same line, I have tried adding display:inline; to both the select and label elements in my code. However, it did not produce the desired result. Here is the HTML code snippet: <form id ="myform1"> ...

css

What is the best way to display text outside of the current div container?

When I include the "Y" in the code snippet below, $title1 and $title2 are positioned outside of the div and centered against the width of the page. However, without the "Y", the text shifts up and aligns with the address class instead. It's puzzling w ...

csshtml