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: , and this is what I want it to look like:

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

React forms are experiencing issues with characters overlapping

Having trouble with overlapping label and input letters in my React form. Looking for: The appearance shown in the top image Experiencing: What is displayed in the bottom image Any solutions on how to resolve this issue? <h5 className="grey-te ...

cssreactjs

Bootstraping Twitter with PHP session starting has become a standard practice in modern

Currently, I am developing a website using PHP and Twitter Bootstrap. The issue I'm encountering is that if I include session_start() first, the layout gets messed up because Bootstrap needs <!DOCTYPE html> to come before it. On the other hand ...

phphtmlcsstwitter-bootstrap

Issues with keyboard accessibility in drop down menus

Looking to improve the keyboard accessibility of my menu bar. Swapped out all instances of :hover with :focus, but unfortunately dropdown menus are still not accessible via keyboard. Does anyone have a solution for this issue? Appreciate any help! ...

htmlcssaccessibility

Update the default monospaced font in Draft.js

Is it possible to change the default system monospace font in Draft Editor to Consolas using Draft.css or global css classes? ...

cssreactjsdraftjs

Transforming a Processing (cursor) file into an interactive webpage

I have created a custom cursor using Processing and now I want to incorporate it into my website. Is there a way to convert the cursor into a .java file so that I can include it in my HTML file? ...

javascriptjavahtmlcursorprocessing

Retrieve the nearest attribute from a radio button when using JQuery on a click event

I have a query regarding the usage of JS / JQuery to extract the data-product-name from a selected radio button, prior to any form submission. Although my attempt at code implementation seems incorrect: return jQuery({{Click Element}}).closest("form" ...

javascriptjqueryhtml

Utilizing the map function to display elements from a sub array

I'm struggling to print out the comments using the map function in this code: class Postcomment2 extends React.Component { uploadcomment = () => { return this.props.post.comments.map((comment) => { return <div>{comment["comment"]}< ...

javascripthtmlreactjsdatabasedictionary

Is it achievable to modify the appearance of the "Saved Password" style on Firefox?

After creating a login page that initially had a certain aesthetic, I encountered an issue when saving login data in Firefox. The saved login page took on a yellow-ish tint that was not present in my original design: I am now seeking advice on how to remo ...

javascripthtmlcssfirefox

forming a boundary that stands alone, unattached to any other boundaries

I am trying to design a navigation bar that resembles the one depicted in the image provided. The concept involves creating a navigation bar where each border is separated from the others, potentially achieved using hr tags. However, I am struggling to fi ...

htmlcssborder

What is the best way to transfer a user-generated PNG file to my backend server?

I'm in the process of developing a website that enables users to generate personalized graphics and easily download them directly from the platform. My approach involves allowing users to customize an svg using a javascript-powered form, which is the ...

javascripthtmlajaxgraphicsrequest

Troubleshooting the mysterious provider problem in Ui-router

I encountered this error message: "Module 'ui-router' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument." Interestingly, I have i ...

htmlangularjsangular-ui-router

Update the display of the mouse pointer

I use CSS to set a custom cursor image: #scroll_up{ display: block; position: absolute; width: 960px; height: 300px; cursor: url(../imgs/cursor_up.png), auto; } The above style is assigned to a div element so that the cursor appea ...

cssattributescursor

Tips for updating the left positioning of a Div element on the fly

Although my title may not fully explain my goal, I am dealing with dynamically created div elements. When a user triggers an ajax request to delete one of the divs, I want to remove it from the DOM upon success. The issue arises in adjusting the layout aft ...

javascriptjqueryhtmlcssajax

Surprising <body> body movement caused by child's margin-top pushing it down

Whenever I come across HTML problems, they seem so simple that I almost feel silly asking about them. But here I am, clueless about why this issue is occurring. In the following fiddle http://jsfiddle.net/o5ee1oag/2/, the body is being pushed down by a 50 ...

htmlcssmargin

having trouble with developing a dropdown menu using jquery

I'm currently creating a drop-down menu for my website and here is the code I'm using: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html dir="ltr"> <head> <met ...

javascriptjquerycssmenu

Form for contacting with file attachment option

I'm having trouble integrating file upload functionality into my existing code. I've been scouring the internet for solutions but haven't found anything that fits seamlessly with my current setup. It's frustrating to encounter error aft ...

phphtmltwitter-bootstrap-3

What is the process for changing text to red when hovering over it in a nested list?

a { color:black; } a:hover { color:red; } <ol> <a href="#"><li>Main1</li></a> <a href="#"><li>Main2</li> <a href="#"><li>Main3 <ol> ...

htmlcss

Adjusting the contenteditable feature to place the caret on a specific child node

I am experiencing some challenges when attempting to position the cursor after an <i> tag within a contenteditable element. Currently, this is what I have: <p contenteditable="true"><i>H</i><i>e</i><i>l</i> ...

javascriptjqueryhtml

Elements floating in space, stretching across the entire width

In my design, I have a fixed size layout with a centered content container. My goal is to have the menu (home, about, contact, login) span 100% of the screen width. You can view the current setup in this jsfiddle: http://jsfiddle.net/Hxhc5/1/ I am aimin ...

csscss-float

Is there a way to extract a value from a string and store it as a variable in

Creating a functionality to resize images from WordPress. The goal is to extract the width and height values from a string similar to this: <img src="/path/img.jpg" width="600" height="400" /> Next step is to remove the specific values (600 and 40 ...

phphtmlvariablessearch