Creating a vertical menu with submenus in CSS that includes a scroll feature

I am attempting to create a vertical menu with a scroll bar.

The issue I'm facing is that the sub-menu is hidden below the scroll bar. Here is the preview

This is the code I have implemented:

HTML Code

<div class="scrollbar" id="ex4">
    <div class="content">
        <div id="menuwrapper">
            <ul>
                <li><a href="#">Home</a>
                </li>
                <li><a href="#">Products</a>
                    <ul>
                        <li><a href="#">Product 1</a>
                            <ul>
                                <li><a href="#">Sub Product 1</a>
                                </li>
                                <li><a href="#">Sub Product 2</a>
                                </li>
                                <li><a href="#">Sub Product 3</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Product 2</a>
                        </li>
                        <li><a href="#">Product 3</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">About Us</a>
                    ... (additional HTML code here)
            </ul>
        </div>
    </div>

CSS Code

.scrollbar {
    width: 250px;
    height: 300px;
    background-color: lightgray;
    margin-top: 40px;
    margin-left: 40px;
    overflow-y: scroll;
    float: left;
}
.content {
    height: 450px;
}
#ex4::-webkit-scrollbar {
    ... (CSS code continues)

Is anyone able to identify the issue?

jquerycss

Answer №1

The issue arises from setting a fixed height in your element, resulting in a vertical scrollbar. If you want to avoid this, consider making the following adjustment.

.scrollbar{
    width:250px;
    min-height:300px; /* Use min-height instead of height */
    background-color:lightgray;
    margin-top:40px;
    margin-left:40px;
    /*overflow-y:scroll;/* /* Comment out this line */
    float:left;
}

.content{
    min-height:450px; /* Use min-height instead of height */
}

See an example without scroll here.

Update:

Check out an example with scroll below:

View the updated version on JsFiddle: here

Answer №2

Creating a CSS Vertical Menu with Scroll Functionality 

<div style="overflow:scroll;"> </div>

Visit this link for more information on how to implement a vertical CSS menu for ASP.NET.

Answer №3

Issue Resolved: The issue can be attributed to a conflict between overflow-y and overflow-x. To fix this, I implemented a workaround from the provided link that doesn't require any JavaScript.

#wrapper{
   height: 300px;
   overflow-x: hidden;

}

.content{
    background-color: lightgray;

}

.scrollbar{
width: 250px;
height: 300px;
margin-top: 40px;
margin-left: 40px;
float: left;
}

#ex4::-webkit-scrollbar{
width: 8px;
background-color: #cccccc;
}
#ex4::-webkit-scrollbar-thumb{
background-color: #333333;
border-radius: 10px;
}
#menuwrapper ul, #menuwrapper ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.clear{
    clear:both;
}
<div id="wrapper">
    <div class="scrollbar" id="ex4">
<div class="content">
<div id="menuwrapper">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Product 1</a>
<ul>
<li><a href="#">Sub Product 1</a></li>
<li><a href="#">Sub Product 2</a></li>
<li><a href="#">Sub Product 3</a></li>
</ul>
</li>
...

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

How can you utilize the Array submission syntax within HTML coding?

I currently have numerous input fields within a form, and some of them are structured like this: <input name="agents[]" type="file" /> Additionally, imagine there is a plus button next to this field as shown below: <img src="plus.jpg" id="some_ ...

javascriptphpjqueryhtmlajax

How to center align an input vertically with Bootstrap 3

I am having trouble vertically aligning an input in my project. Interestingly, my code works for a span but not for the input! I'm puzzled - what could be the reason behind this? JSFiddle Here is the CSS code snippet: .float { display: table-cel ...

htmlcsstwitter-bootstrap-3

Eliminate all HTML code between two specific markers

Is there a way to effectively delete all the HTML content located between two specific strings on a webpage, regardless of their positions and the content in between them? For example, <div class='foo'> <div class='userid'& ...

javascriptjqueryhtmlcssweb

Clicking on text triggers image display

My journey in coding is just starting and I have a good understanding of the basics of HTML, CSS, Javascript, and jQuery. I am trying to make an image appear when I click on text but struggling with the implementation. I'm working on a restaurant web ...

javascripthtmlcsseventsonclick

Is there a way to ensure the scroll bar remains at the bottom as new data is added?

Hey there Coding Enthusiasts! I'm currently working on developing a chat system and one of the features I'm trying to implement is keeping the scroll bar at the bottom. The goal is to ensure that when someone sends a message, the user doesn' ...

javascriptphphtmlcss

CSS - Ensuring the second line of text in ul/ol li does not extend further left than the first line

My website features several lists that have this format: > lorem ipsum I am trying to style them like this: > lorem ipsum If anyone can provide guidance on how to rephrase the question I am asking, I would greatly ap ...

htmlcss

Javascript error when attempting to add leading zeros

Is there a way to utilize JavaScript or JQuery in order to prepend a zero to this script? for (im=1;im<=31;im++){ days[im]=everyDay[im]; } ...

javascriptjquerypadding

Using the ampersand symbol (&) within the data parameter of a jQuery AJAX request

Currently, I am using jQuery to make asynchronous HTTP (Ajax) requests with the basic $.ajax(). Here is the code snippet: $("textarea").blur(function(){ var thisId = $(this).attr("id"); var thisValue = $(this).val(); $.ajax({ type: "POST", ...

jquery

Focusing on a specific input category inside a div container

Struggling to customize the appearance of the last input type within the Jetpack plugin in WordPress. I have experimented with the following CSS: #subscribe-submit > input[type="submit"]::last-of-type { #subscribe-submit > input[type="submit"]:nth- ...

css

Showing a div element when the submit button is clicked

I am working on a form with a radio button and a submit button. When the submit button is clicked, I want to show a hidden div. Below is my current code: <form action="" method="GET" name="myform"> <input type="radio" name="ID" value="total" ...

javascriptphphtmlcss

The div positioned above the navbar is not displaying as intended

Issue with the position of a div above the navbar in the body (See Screenshot). Original Code: <div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;"> <h1>Bootstrap Affix Example</h1> <h3>Fi ...

htmlcsstwitter-bootstrapbootstrap-4

"Triggering a JavaScript event when pasting text on

How can I capture a paste event on an iPhone using JavaScript and jQuery? I've already tried using jQuery's keyup and paste methods without success. Any suggestions? Here is the code I have attempted: $("#MyInputFields input").eq(0).b ...

javascriptjqueryiospastejquery-events

Assistance needed to make a jQuery carousel automatically rotate infinitely. Having trouble making the carousel loop continuously instead of rewinding

Currently, I am in the process of creating an auto-rotating image carousel using jQuery. My goal is to make the images rotate infinitely instead of rewinding back to the first image once the last one is reached. As a beginner in the world of jQuery, I&apos ...

javascriptjqueryhtmlcss

Adjusting the navigation image as it passes through various div elements during scrolling

Is it possible to dynamically change an image in the navigation bar based on the user's scroll position? For example, I want pic1 to be displayed when the page content is at the top, then switch to pic2 once the user reaches the footer, and then back ...

javascripthtmljquerycss

The Jquery mouse hover effect seems to be cutting out prematurely

I recently developed a straightforward menu for a small project I'm working on. However, I noticed that in IE6 or IE7, the menu drops down when you mouse over it but goes back up when the mouse is moved downwards slowly. Has anyone encountered this i ...

jqueryhtmlcss

Substitute all text with something different, not just empty strings

My JavaScript/jQuery code is causing some trouble as it replaces all null outputs, even the valid ones. Any ideas on how to fix this? Here's what happens without the if (items[z].Office == null) { statement: https://i.sstatic.net/bPU8h.png And wit ...

javascriptjqueryhtml

Tips for preventing a photo's placement from shifting while you are scrolling

I am struggling to keep my background photo positioned the same way as the viewer scrolls down on my landing page. I want it to remain fixed relative to the screen, just like in this example website where the girl's face stays in place as you scroll d ...

jqueryhtmlcssfrontend

"Enhance security with the choice of NFC login on our web-based

One of the features I am considering implementing in my web system is the ability for staff to log in by swiping a card against an NFC scanner, as opposed to the traditional username and password method. This would allow for a seamless and quick authentica ...

jquerypythonjsonlinuxnfc

Troubleshooting: WordPress background image not displaying

WordPress trouble: The background image I added to my style.css isn't showing up on the site. body{ background: url("/wp-content/themes/my_theme/images.png"); } Any advice would be greatly appreciated! ...

htmlcsswordpresswordpress-themingbackground-image

displaying a new image in a separate window while remaining in the current container

I am attempting to find a solution to create a page where the user can click on an image to open it while still keeping the other images available as options. I hope my explanation is clear enough for you to understand. The code might look something like ...

javascripthtmlcssimage