Alignment of Submenus in a CSS Vertical Menu

I'm currently facing an issue with my vertical menu and submenu alignment. Despite everything working correctly, the submenu does not align horizontally as expected, instead shifting up against the header div above it. Any assistance to resolve this would be greatly appreciated.

HTML

<div class="leftcontainer">
<ul>
  <li><a class="current" href="index.html">Home</a></li>
  <li><a href="#">History</a></li>
</ul>
<div class="spacer"></div>
<ul>
<li><a href="#">Packaging</a>
    <ul>
        <li><a href="#">Item</a></li>
       <li><a href="#">Item</a></li> 
       <li><a href="#">Item</a></li>  
   </ul>
 </li>  
<li><a href="#">Transportation</a>
        <ul>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li> 
        <li><a href="#">Item</a></li>  
   </ul>
</li>
<li><a href="#">Warehousing</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Real Estate</a></li>
<li><a href="#">Contact Us</a></li>

</ul>

CSS

.container {
          width: 960px;
          height:740px;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;
          padding-bottom: 10px;
          position: relative;
          overflow: auto;
          box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.15);
      }

      body {
          font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
          background-image: url(../img/body-bg);
          background-repeat: repeat-x;
      }

      .leftcontainer {
          float: left;
          width: 160px;
          height: 650px;
          display: inline-block;
          background-image: url(../img/nav-div-bg.png);
          background-repeat: repeat-y;
          margin-bottom: 0px;
          clear: both;
          position: absolute;
          z-index: 999;
      }

      ul li {
          text-decoration: none;
          list-style-type: none;
          margin-left: -40px;
          text-align: left;
          display: block;
      }

      ul {
          margin-top:0px;
          margin-bottom: 0px;
          list-style-type: none;
      }

      ul li a:link {
          text-decoration: none;
          list-style-type: none;
          color: #FFF;
          display: block;
          padding-top: 20px;
          padding-bottom: 20px;
          padding-left: 20px;
          font-size: 16px;
      }

      ul li a:hover {
          text-decoration: none;
          list-style-type: none;
          color: #FFF;
          padding-left: 20px;
          display: block;
          padding-top: 20px;
          padding-bottom: 20px;
          background-image: url(../img/nav-bg.png);
          background-repeat: no-repeat;
          background-position: left center;
          box-shadow: -30px 0px 9px 0px rgba(0,0,0,0.15);
      }

      .container ul li a:visited {
          text-decoration: none;
          list-style-type: none;
          color: #FFF;
          padding-left: 20px;
          display: block;
          padding-top: 20px;
          padding-bottom: 20px;
      }

      ul li ul {
          position: absolute;
          display: none;
          background: #5f6975;
          border-radius: 0px;
          padding-top: 0;
          padding-right: 0;
          padding-bottom: 0;
          padding-left: 0;
      }

      ul li:hover ul {
          display: inline-block;
          z-index: -1;
          left: 172px;
          top: 0px; 
      }

      ul ul li {
          background: #5f6975;
          float: none; 
          padding-left: 0px;
          border-top: 1px solid #6b727c;
          border-bottom: 1px solid #575f6a;
      }

      ul ul li a:link{
          padding: 10px 0px 10px 30px;
          color: #fff;
          width: 130px;
      } 

      ul ul li a:hover {
          background: #4b545f;
          box-shadow: none;
      }

      .current{
          text-decoration: none;
          list-style-type: none;
          color: #FFF;
          padding-left: 20px;
          display: block;
          padding-top: 20px;
          padding-bottom: 20px;
          background-image: url(../img/nav-bg.png);
          background-repeat: no-repeat;
          background-position: left center;
          box-shadow: -30px 0px 9px 0px rgba(0,0,0,0.15);
      }
cssvertical-alignmentalignment

Answer №1

To correctly position sub menus, it is important to use absolute positioning. In order for the positioning to be accurate, the parent li should be positioned relative so that it serves as a reference point for the child element with absolute positioning.

The basic CSS required for this would look something like the following:

nav ul {
    float: left;
}
nav ul ul {
    display: none;
}
nav ul li {
    position: relative;
}
nav ul li:hover > ul {
    position: absolute;
    display: block;
    top: 0;
    left: 100%;
}

You can view a demonstration on JSFiddle: http://jsfiddle.net/Bp48q/

It's worth noting that this code allows for nested sub menus, although excessive nesting could lead to a poor user experience. Despite this, the functionality should continue working properly.

Answer №2

To enhance the layout, it is recommended to include position: relative; in the main <li> element.

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

I'm having trouble getting the "spacing" styling attribute to work in Material UI when I attempt to space out elements within my Box component. Can anyone explain why this might be happening?

Within my React 16.10 application, I am utilizing materialUI components. Specifically, I have incorporated two buttons inside a Box element. <Box style={{ marginTop: "3rem", marginLeft: "1rem", display: "f ...

cssreactjsmaterial-uispacingbox

Tips for containing `overflow` within a flexbox container

I've organized my body space into three sections: header, content, and footer. To achieve a sticky footer effect at the bottom, I used the flex property in my layout. However, I'm struggling to add a scrollbar to my main container box. I've ...

htmlcssflexbox

Is there a way to alter a class using ng-class only when the form is deemed valid?

I am trying to implement a feature where an input field shows as required, but once the user enters text, it indicates that the input is valid by changing the border color from red to green. I am facing an issue with this line of code always returning fal ...

javascripthtmlcssangularjs

Adjusting the size of images in a Bootstrap lightbox gallery

I am currently working on a website for an artist, making the galleries a key aspect. The website is built using Bootstrap, with the Lightbox for Bootstrap plugin being used for the galleries. Everything seems to be working well in terms of adjusting the i ...

javascripthtmlcsstwitter-bootstrap

Maintaining consistent row height in bootstrap when displaying or hiding a button

I'm currently working on a project utilizing AngularJS and Bootstrap to create a dynamic form. My goal is to have an 'edit' button display when a user hovers over a specific row of the form. However, I'm facing an issue where the row&ap ...

htmlcssangularjstwitter-bootstrap

Align checkboxes horizontally to resemble a progress bar styling

Currently, I have a series of checkboxes that are displayed sequentially on the page. <div class="myCheck"> <h5>Here's what you've selected so far</h5> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect ...

cssmaterial-design

What steps can I take to avoid my Bootstrap Alert overlapping items in my Nav bar when displayed?

Here is the code from my _notices.html.erb file: <% flash.each do |msg_type, message| %> <div class="row pt-6 alert-messages"> <div class="col-lg-6 offset-lg-3"> <div id="inner-message" class=" ...

cssbootstrap-4

What steps should I take to have a specific input prompt a certain action?

I am currently working on creating a function that checks when a user inputs a number between 0 and 8, triggering an action corresponding to that specific number. For example, if the user enters 5, a picture and text should appear; whereas if they input 3, ...

javascripthtmlcss

What is the best way to center my text vertically within a Bootstrap 5 "col" class division?

Struggling to create a Bootstrap 5 page and facing challenges with vertically aligning text in divs? Here's the code snippet causing problems: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

htmlcssbootstrap-5

Tips on how to change the color scheme of a webpage

I am currently working with basic HTML and CSS, but I am facing an issue where my background color is only filling a third of the page instead of the entire page. Despite attempting to use the html and body classes for the background color, it did not prod ...

htmlcss

Creating a div that becomes fixed at the top of the page after scrolling down a certain distance is a great way to improve user experience on a

I am struggling to create a fixed navigation bar that sticks to the top of the page after scrolling 500px, but without using position: fixed. Despite trying various solutions, none seem to work due to the unique layout of my navigation bar. Strangely enoug ...

javascriptjqueryhtmlcss

What is the method for updating the value of the Sass variable in Angular 4?

Within the file app.component.scss, there is a variable named $color that has been set to 'red'. What steps can be taken within the file app.component.ts in order to access this variable and change its value to 'green'? ...

cssangularsass

React Navigation Item Toolbar Misplacement

I've been trying to align the navigation item with the logo on the same line within the toolbar, but I'm facing an issue where they keep appearing in different rows. To see the error for yourself, check out the code sandbox here. This is how I s ...

javascriptcssreactjsstyled-components

Custom Component in React Bootstrap with Overflowing Column

I am working on a custom toggle dropdown feature in my React application: import React from 'react'; import 'react-datepicker/dist/react-datepicker.css'; const DateRange = props => ( <div className="dropdown artesianDropdo ...

javascripthtmlcsstwitter-bootstrapreactjs

Obtaining visuals in a specific manner

I have a customized slider (flexslider) with 10 images per slide. The images are currently manually inserted, but I want to optimize the slider to dynamically extract images using PHP. However, my current setup only displays one image per slide. How can I ...

phphtmlcss

CSS techniques for aligning content

I am currently working on designing a website template, and I have encountered an issue with positioning three individual columns that contain blocks of content. My objective is to have the first block of content in each column start at the top of their re ...

htmlcsspositioning

Differences in CSS between IE10 and Chrome are causing compatibility issues

Website in question: What is causing the difference in display between IE 10 and other browsers? The website appears to function correctly on Chrome: IE 10: ...

cssinternet-explorerinternet-explorer-10

Having trouble with displaying the CSS background image?

I've been attempting to configure background images using CSS, but for some reason, I'm not able to get the images to show up correctly. Below is the CSS code that I'm working with: a.fb { background-image: url('img/Facebook.png&a ...

htmlcss

Utilizing CSS3 Animation for enhanced hover effects

I have a setup with two divs. One of the divs expands in height when I hover over it. What I'm trying to achieve is to display text with a fade-in effect somewhere on the screen when I hover over that specific div. Additionally, I want to show another ...

htmlcsshover

Creating colorful containers using Bootstrap

Hey there, I am interested in creating small colored boxes to represent different meanings for each color. I came across this code snippet but I am unsure how to adjust the size: <div class="p-3 mb-2 bg-primary text-white">.bg-primary</d ...

htmlcssbootstrap-4