Simple HTML and CSS tutorial: Creating a vertical menu with a left-popping submenu

Recently, I designed a vertical menu bar using a Dreamweaver template with CSS styling. Subsequently, I added a submenu feature that I intended to have pop out from the left side of the main menu links they are associated with. Despite numerous attempts and extensive research efforts, I have been unable to achieve the desired outcome. Upon further investigation, it seems that my CSS file may be the culprit hindering the proper functionality of the submenu.

Currently, everything appears in a vertical layout. While the submenu remains hidden as intended, it unexpectedly pops down upon hover instead of expanding to the left. I am seeking assistance with this issue as I have dedicated nearly a week trying to resolve it without success. Your help will be greatly appreciated. Thank you in advance.

JSfiddle Demo

HTML

    <div class="sidebar1">
      <nav>
        <ul id="navbar">
          <!-- Menu items go here -->
        </ul>
      </nav>

      <aside>
        <p> Some informational text can go HERE</p>
      </aside>
    </div>

CSS

@charset "utf-8";
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
}
/* All other CSS styles go here */

Answer №1

I took the initiative to revamp your CSS for the navbar, utilizing your existing styles as a foundation to enhance its appearance.

@charset "utf-8";
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
}
...
...

It's completely operational, where the position of the .submenu is determined by the relative positioning of the nav #navbar li being hovered over.

I trust this modification proves beneficial.^^

Answer №2

To improve the layout, consider positioning the ul.submenu elements absolutely. Specify the width explicitly and position it a certain number of pixels away from the left edge of its parent element ul#navbar li using left: -180px (or adjust based on your preferred width).

Check out the DEMO here

ul#navbar li {
    position: relative;
}
ul.submenu {
    position: absolute;
    width: 180px;
    left: -180px;
    top: 0;
}



Additionally, ensure you correct the missing curly brace { in the original CSS for the nav ul {...} line.

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

Is it possible to create a button function in HTML that can alter the CSS image tag?

Is there a way I could create a function that can retrieve a value, update an image source, and then incrementally select another value? It would be incredibly helpful if you could provide a reference where I could learn how to do this or explain it in det ...

Is it possible to avoid widows in CSS without the need for extra HTML elements?

I have a snippet of text that is controlled within a Content Management System. The CMS restricts the use of HTML or special characters such as &nbsp; or <span>. Despite my attempts to adjust margins and padding, I cannot achieve the desired out ...

When viewing on mobile devices, the hover effect in responsive web design

While working on a responsive website, I encountered some challenges. I have a Div containing an image and some information. When a user hovers over this div, the background changes and 3 buttons appear. However, the issue arises when using a mobile devi ...

Need to specify a parameter type for the input tag in HTML

Currently, I am developing a customized focus method for my webpage using the following script: <script type="text/javascript"> function myFunction() { document.getElementById("name").focus(); } </script> I ...

How can I remove the arrow from a CSS selector?

I'm looking to enhance the appearance of a select element on my webpage, so I've crafted some custom CSS: .selectWebDropDown { background-color:Transparent; background: url(../Images/ddl_Normal.png) no-repeat right #FFFFFF !important; ...

Creating a vertical triangle pointing to the right as the border of a div element

Currently, I'm working on a mockup that includes the following elements. I am attempting to ensure that the triangular right end of the "Delay Your Payments" div matches the mockup exactly. To achieve this, I aim to use CSS without relying on sliced ...

Discover the steps to download web page data using Objective-C while ensuring that JavaScript has finished executing

I attempted something similar: NSString *url = @"http://www.example.com"; NSURL *urlRequest = [NSURL URLWithString:url]; NSError *error = nil; NSString *htmlContent = [NSString stringWithContentsOfURL:urlrequest encoding:NSUTF8StringEncoding error:&e ...

Unexpected resizing of DIV element in Chrome

Working on my new PHP website, I encountered a strange issue recently. I have a file for the top navbar that is included on every page and it was functioning perfectly fine. However, while creating a register form, I noticed something odd happening. When r ...

I'm having trouble with Bootstrap 4 where my fixed navbar won't stay separate from my jumbotron

Currently working on a website and utilizing Bootstrap. Looking to keep my fixed navbar distinct from my jumbotron, but struggling to achieve separation between the two. Is there a method to accomplish this without directly modifying the CSS file? Here i ...

Using JQuery to locate and substitute occurrences of HTML elements throughout my webpage

Looking for assistance with a JQuery search and replace task involving multiple instances of HTML within a specific DIV element on my webpage. Specifically, I need to change certain items in the textbox to a simpler display format. Here is a snippet of th ...

Is there a way to utilize jQuery to determine the distance the user has scrolled down?

Looking for some help with changing the style of an element based on scroll position using jQuery. Specifically, I want to add a class name to a div once the user has scrolled beyond 200 pixels and then remove the class name when they scroll back up to l ...

Employ the power of AJAX to selectively display or conceal a specific group of images

Have you ever thought about showcasing a large number of images on a non-CMS website? Say you have 50 images that can't all be displayed at once. One idea is to display the first 15, then allow users to click "Next" to reveal the next batch of 15, and ...

Can the individual headers of an ag-grid column be accessed in order to apply an on-mouseover event with a specific method?

In my current project, I am utilizing ag-grid to create a dynamic web-application that combines tools from various Excel files into one cohesive platform. One of the Excel features I am currently working on involves displaying a description when hovering ...

What is the best way to apply a class to a container when a component in AngularJS receives focus or is clicked?

I am trying to apply a class to the container when either the input field is focused or when the dropdown component receives focus or is clicked. The class should be removed when the focus is lost. The requirement is for the input container to have the &a ...

The external Jquery file is being successfully loaded, however, the Jquery functions are failing to execute

I'm having an issue with my HTML partial, main index.html, and external JQuery file. Even though the file is being loaded successfully (verified through an alert function), the JQuery functions are not executing as expected. Upon checking the resourc ...

What is the process for ensuring that the "ng-multiselect-dropdown" is a mandatory field within Angular 7?

Is there a way to require the ng-multiselect-dropdown field to have at least one selected item? <ng-multiselect-dropdown [placeholder]="'Select countries'" [data]="countries" [(ngModel)]="countriesSelectedItems" [settings]="co ...

What is the best way to make sure flexbox items fill in any available space?

I am currently working on a website project, and I am looking to display text content in two columns using flexbox with each column taking up 50% of the width. However, I am encountering an issue as illustrated in the image below: https://i.sstatic.net/Gh ...

Uploading large files on Vuejs causes the browser to crash

Whenever I try to upload a file using my browser (Chrome), everything goes smoothly for files with a size of 30mb. However, if I attempt to upload a file that is 150mb in size, the browser crashes. The server's maximum upload size has been configured ...

Understanding the distinction between .navbar and .navbar a in CSS

Can you explain the distinction between .navbar and .navbar a? .navbar { overflow: hidden; background-color: #333; font-family: Arial; } .navbar a { float: left; font-size: 16px; color: white; ...

Display mobile app components directly inside HTML tags within a webview

Is it possible to integrate our native Android components within regular HTML content and display them on a webview? For instance, instead of a standard button in a basic HTML page, can we replace it with a Native Android Button? How would this be accomp ...