How can I align a sub-submenu horizontally using CSS?

I've built a nested menu using the ul/li tags, and I'm looking to align the second and third sub-menus horizontally with the first submenu.

Here is my current visual layout: https://i.sstatic.net/4TctL.png, and this is what I want it to look like: https://i.sstatic.net/ehP2G.png

CSS/HTML:

 body {
  background-color: #000;
  font-size: 1.6vw;
  color: #FFF;
}
div#header {
  width: 65vw;
  margin-left: auto;
  margin-right: auto;
}
#nav {
  font-size: 1.4em;
  white-space: nowrap;
  position: absolute;
}
#nav ul {
  display: inline-table;
  list-style-type: none;
  margin: 0px;
  border-style: none;
  padding: 0px;
}
#nav ul li {
  display: table-cell;
}
#nav ul li a {
  margin: 0px 0px 0px 20px;
  padding: 0px 0px 0px 5px;
  border-left-style: solid;
  border-left-width: 7px;
  border-color: #FFF;
  color: #FFF;
  text-decoration: none;
}
#nav ul li .active {
  color: #F00;
  border-left-color: #F00;
}
#nav ul li a:hover {
  color: #F00;
  border-color: #F00;
}
#nav ul li ul {
  position: absolute;
  display: none;
}
#nav ul li:hover ul {
  display: block;
  margin: 0px;
  padding: 5px 0px 0px;
}
#nav ul li:hover ul li ul {
  display: none;
}
#nav ul li:hover ul li:hover ul {
  display: block;
  margin: 0px;
  padding: 5px 0px 0px;
  font-size: 0.85em
}
<html>

<head>
  <title>Home</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

  <div id="header">
    <div id="nav">
      <ul>
        <li><a href="#" class="active">Menu 1</a>
        </li>
        <li><a href="#">Menu 2</a>

          <ul>

            <li><a href="#">Submenu 1</a>

              <ul>
                <li><a href="#">Subsubmenu 1</a>
                </li>
                <li><a href="#">Subsubmenu 2</a>
                </li>
              </ul>

            </li>

            <li><a href="#">Submenu 2</a>

              <ul id="sub2">
                <li><a href="#">Subsubmenu 3</a>
                </li>
                <li><a href="#">Subsubmenu 4</a>
                </li>
                <li><a href="#">Subsubmenu 5</a>
                </li>
                <li><a href="#">Subsubmenu 6</a>
                </li>
                <li><a href="#">Subsubmenu 7</a>
                </li>
              </ul>

            </li>

            <li><a href="#">Submenu 3</a>

              <ul id="sub3">
                <li><a href="#">Subsubmenu 8</a>
                </li>
                <li><a href="#">Subsubmenu 9</a>
                </li>
                <li><a href="#">Subsubmenu 10</a>
                </li>
              </ul>

            </li>

          </ul>

        </li>
        <li><a href="#">Menu 3</a>
        </li>
        <li><a href="#">Menu 4</a>
        </li>
        <li><a href="#">Menu 5</a>
        </li>
        <li><a href="#">Menu 6</a>
        </li>
      </ul>
    </div>
  </div>

</body>

</html>

The only solution I've thought of so far is manually adjusting the margin to the left by adding the following:

#nav ul li:hover ul li:hover ul#sub2  {
margin-left: -10.8vw
}

#nav ul li:hover ul li:hover ul#sub3 {
margin-left: -21.5vw
}

I initially used "vw" as a unit because I have a 16:9 monitor (1366x768 resolution) assuming it would scale on other 16:9 monitors, but testing on different resolutions shows that the sub-menus are not aligned correctly. Do you think minor adjustments can fix this issue, or do I need to consider rewriting the code with fixed pixel sizes?

htmlcss

Answer №1

One solution you can try is to add the following CSS:

#nav ul li ul li ul {
  left: 0;
}

Here is a demo - http://jsfiddle.net/d8hrcxmr/2/

If you want all sub menus to appear on the far left, you can check out this demo - http://jsfiddle.net/d8hrcxmr/1/

#nav ul li ul {
  left: 0;
}

This approach may be more effective in addressing the issue of submenus being cut off on the right side (especially with long submenus on Menu6).

Answer №2

To align the sub menu with the left edge of its containing element, you must use the left property. Here is an example that demonstrates this:

body {
  background-color: #000;
  background-position: center;
  background-repeat: repeat;
  font-family: 'Open Sans Condensed', Calibri, sans-serif;
  font-size: 1.6vw;
  color: #FFF;
}
div#header {
  width: 65vw;
  margin-left: auto;
  margin-right: auto;
}
#nav {
  font-size: 1.4em;
  white-space: nowrap;
  position: absolute;
}
#nav ul {
  display: inline-table;
  list-style-type: none;
  margin: 0px;
  border-style: none;
  padding: 0px;
}
#nav ul li {
  display: table-cell;
}
#nav ul li a {
  margin: 0px 0px 0px 20px;
  padding: 0px 0px 0px 5px;
  border-left-style: solid;
  border-left-width: 7px;
  border-color: #FFF;
  color: #FFF;
  text-decoration: none;
}
#nav ul li .active {
  color: #F00;
  border-left-color: #F00;
}
#nav ul li a:hover {
  color: #F00;
  border-color: #F00;
}
#nav ul li ul {
  position: absolute;
  display: none;
}
#nav ul li:hover ul {
  display: block;
  margin: 0px;
  padding: 5px 0px 0px;
}
#nav ul li:hover ul li ul {
  display: none;
}
#nav ul li:hover ul li:hover ul {
  display: block;
  left: 0;
  margin: 0px;
  padding: 5px 0px 0px;
  font-size: 0.85em
}
<html>

<head>
  <title>Home</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

  <div id="header">
    <div id="nav">
      <ul>
        <li><a href="#" class="active">Menu 1</a>
        </li>
        <li><a href="#">Menu 2</a>

          <ul>

            <li><a href="#">Submenu 1</a>

              <ul>
                <li><a href="#">Subsubmenu 1</a>
                </li>
                <li><a href="#">Subsubmenu 2</a>
                </li>
              </ul>

            </li>

            <li><a href="#">Submenu 2</a>

              <ul id="sub2">
                <li><a href="#">Subsubmenu 3</a>
                </li>
                <li><a href="#">Subsubmenu 4</a>
                </li>
                <li><a href="#">Subsubmenu 5</a>
                </li>
                <li><a href="#">Subsubmenu 6</a>
                </li>
                <li><a href="#">Subsubmenu 7</a>
                </li>
              </ul>

            </li>

            <li><a href="#">Submenu 3</a>

              <ul id="sub3">
                <li><a href="#">Subsubmenu 8</a>
                </li>
                <li><a href="#">Subsubmenu 9</a>
                </li>
                <li><a href="#">Subsubmenu 10</a>
                </li>
              </ul>

            </li>

          </ul>

        </li>
        <li><a href="#">Menu 3</a>
        </li>
        <li><a href="#">Menu 4</a>
        </li>
        <li><a href="#">Menu 5</a>
        </li>
        <li><a href="#">Menu 6</a>
        </li>
      </ul>
    </div>
  </div>

</body>

</html>

Answer №3

Here is a simple solution: just include the following code snippet in your CSS file:

body {
  background-color: #000;
  font-size: 1.6vw;
  color: #FFF;
}
div#header {
  width: 65vw;
  margin-left: auto;
  margin-right: auto;
}
#nav {
  font-size: 1.4em;
  white-space: nowrap;
  position: absolute;
}
#nav ul {
  display: inline-table;
  list-style-type: none;
  margin: 0px;
  border-style: none;
  padding: 0px;
}
#nav ul li {
  display: table-cell;
}
#nav ul li a {
  margin: 0px 0px 0px 20px;
  padding: 0px 0px 0px 5px;
  border-left-style: solid;
  border-left-width: 7px;
  border-color: #FFF;
  color: #FFF;
  text-decoration: none;
}
#nav ul li .active {
  color: #F00;
  border-left-color: #F00;
}
#nav ul li a:hover {
  color: #F00;
  border-color: #F00;
}
#nav ul li ul {
  position: absolute;
  display: none;
}
#nav ul li:hover ul {
  display: block;
  margin: 0px;
  padding: 5px 0px 0px;
}
#nav ul li:hover ul li ul {
  display: none;
}
#nav ul li:hover ul li:hover ul {
  display: block;
  margin: 0px;
  padding: 5px 0px 0px;
  font-size: 0.85em
}
#nav ul li ul li ul {
  left: 0;
}

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

A guide on dynamically adding a CSS stylesheet to an Angular component during runtime

I have a requirement to dynamically inject a stylesheet into a component at runtime. The CSS url needs to change depending on user configuration settings and the selected theme. Using styelUrls for static injection won't work in this case, as it is s ...

cssangularangular-components

Access a document from a collaborative directory directly in a web browser

When I paste the shared path for a PDF file into the address bar, it opens perfectly in all browsers. The code below works fine in IE 8 but not in Chrome and Firefox. Code: function openPDF(file) { window.open(file, '_blank'); } function link ...

javascriptjqueryhtmljqgridanchor

Encountered an error while trying to download a PDF document in React

I'm currently working on adding a button to my website portfolio that allows users to download my CV when clicked. The functionality works perfectly fine on my localhost, but after deploying it to AWS Amplify, I encountered an error. The error occurs ...

javascripthtmlcssreactjsnpm

"Exploring the process of implementing a fixed method POST in Angular 5

When developing an application for Portal, I encountered an issue where a newly created role is not displayed without refreshing the browser. How can I ensure that the added element is directly displayed in the table without needing to refresh the browser? ...

htmlangularposthttpclient

I am struggling to save the value from my input field into the app.component.ts file

Having some trouble storing an input from my form into a property. After submitting, the console.log is showing undefined in the console. I've experimented with different variations, but none seem to be working as intended. <form> <input #i ...

htmlangular

Determine the difference between the starting and ending dates in AngularJS

In my project, I am trying to implement a feature where an error message should be displayed next to the control if the "ToDate" is before the "FromDate". Currently, I have set a minimum date which successfully disables the selection of ToDate before FromD ...

htmlangularjs

What could be causing this issue where the input button displays perfectly centered in Chrome, but not in IE and Firefox?

Have you noticed that this input button appears perfectly centered in Chrome, but in IE or Firefox it seems to be off to the right? You can see it as the second button on the right side of this page: Site : HTML : <div style="float:center;text-align: ...

htmlcss

Tips on positioning the image to the left of your content instead of above it

Currently, I am following a tutorial on Flask and attempting to include the profile picture in each article displayed on the website. Here is the code snippet used to display an article: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a ...

htmlcsstwitter-bootstrap

List layout enhancement provided by Bootstrap

I'm facing an issue with the layout of a feature list content box. While it looks good on desktop, there are problems in smaller versions like tablet and mobile devices. The four words with icons are breaking and I believe this might not be the best s ...

htmlcssbootstrap-4

JavaScript post method for JSON data: no input or output values

I am currently developing a page that extracts data from an HTML table consisting of two columns and an index of a form, and then converts it into a JSON string. The intention is to pass this data into PHP for further processing, perform calculations on th ...

javascriptphpjqueryhtmljson

JavaScript fails to focus on dynamically inserted input fields

Within my HTML template, there is an input element that I am loading via an Ajax call and inserting into existing HTML using jQuery's $(selector).html(response). This input element is part of a pop-up box that loads from the template. I want to set f ...

javascriptjqueryhtmlajax

What are the best situations to utilize bootstrap and when should you avoid it?

When it comes to web development, there is often a debate on whether to use Bootstrap or custom CSS for designing a website. For my school project, I am tasked with creating a homepage and contact page using Bootstrap primarily. However, we are also requir ...

csssassbootstrap-5

What is the best way to collect and store data from various sources in an HTML interface to a Google Spreadsheet?

Currently, I have a spreadsheet with a button that is supposed to link to a function in my Google Apps Script called openInputDialog. The goal is for this button to open an HTML UI where users can input text into five fields. This input should then be adde ...

javascripthtmlgoogle-apps-scriptgoogle-sheets

Creating a p5.js circle on top of an HTML image: A step-by-step guide

Currently, I am integrating an image into my web application using standard JavaScript and HTML. The image represents a basic map, and my objective is to utilize p5.js to draw on it. <div id="map"> <img src="Assets/MENA.jpg" ...

javascripthtmlcssp5.js

Efficiently handling multiple form submissions using a single jQuery Ajax request

I'm working on a page that has 3-4 forms within divs, and I want to submit them all with just one script. Additionally, I want to refresh the content of the specific div where the form is located. However, I'm unsure of how to specify the current ...

javascriptphpjqueryhtmlajax

How to easily incorporate images after text in Bootstrap 4 beta

I seem to be having trouble inserting an image in the "menu" section for the last item "Kava so sebou" after the text. I want the picture to be centered vertically and the row to maintain consistency with the other items above it. Any advice or suggestions ...

htmlcssbootstrap-4

What is the best way to close an ajax page within the main page using a button?

I am dealing with a situation where I have 2 pages. The first page contains a div called 'ajaxicall', which loads another page inside it. The challenge I am facing is figuring out how to close the second page when I click on the "close" button w ...

javascriptjqueryhtmlcssajax

Modify MUI's ListItemText component by targeting a specific span to implement customized styles using the useStyle hook

It's quite perplexing that although this is a straightforward task in regular CSS, it must be accomplished through MUI's useStyles for some peculiar reason. Essentially, I possess a ListItem containing a ListItemText. It appears as follows: cons ...

javascriptcssreactjsmaterial-ui

Expanding the table to display additional rows using pagination in an Angular application

I have implemented a table in Angular that displays data fetched from an API. The requirement is to initially display only the first 5 rows and provide an option for users to view more rows (in groups of 5) with pagination support. Below is the code snipp ...

htmlangulartypescript

The MySQL query is returning a blank result with only the column headings displaying

I have been working on improving my skills in PHP and AJAX by developing an application that enables users to search a database for real-time product stock information. Currently, I am facing an issue where the headings are displayed when a user types a le ...

phphtmlcssmysqlajax