CSS for a Dropdown Menu with Multiple Layers

I've successfully implemented a dropdown menu, but now I'm facing the challenge of adding another level to it. Specifically, I want a second level to drop down when hovering over "Test3". What do I need to add or modify in the code to achieve this?

CSS:

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}
</style>

HTML:

<nav>
<ul id="menu">

<li class="dropdown">
<a href="#" class="dropbtn">Location</a>
<div class="dropdown-content">
<a href="#">Test1</a>
<a href="#">Test2</a>
<a href="#">Test3</a>
</div>  
</ul>
</nav>
htmlcss

Answer №1

It's possible that the li tag was not closed properly. Putting a div inside the li element can complicate things. One easier solution could be to create a new level and wrap everything in a ul-li-ul loop, like this:

<ul id="menu">
    <li><a href="#">SOMETHING LV1</a></li>
    <li><a href="#">SOMETHING LV1</a></li>
    <li><a href="#">DROPDOWN 1</a>
      <ul>
        <li><a href="#">SOMETHING LV2</i></a></li>
        <li><a href="#">DROPDOWN 2</i></a>
          <ul>
            <li><a href="#">SOMETHING LV3</a></li>
          </ul>
        </li>
      </ul>
    </li>
</ul>

To show the menu on hover, you can hide it initially and then display it when hovering over the parent item:

#menu li ul{
    display: none;
}
#menu li:hover>ul{
    display: block;
    position: absolute;
    width: 100%;
}

This method allows for multiple levels of menus without any issues. You can also check out an example on JSFiddle: https://jsfiddle.net/fp1x1v05/ I hope this explanation helps.

Answer №2

Apologies for the previous answer that did not properly isolate the links.

The best approach is to target hover events on elements containing links and use more specific selectors.

Consider using the following code:

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropdown-content ul li {
    display: none;
}
.dropdown:hover .dropdown-content li:hover ul li {
    display: block;
}
</style>
<nav>
<ul id="menu">

<li class="dropdown">
<a href="#" class="dropbtn">Location</a>
<ul class="dropdown-content"><li><a href="#">Test1</a><ul><li>Subtest 1</li></ul></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test3</a></li></ul>
</ul>
</nav>

Answer №3

header nav
        {
        list-style-type: none;
        text-align: center;
        padding: 0;
        }
header li
        {
        display: inline-block;
        position: relative;
        background-color: rgba(0,0,100,0.5);
        }
header li:hover
        {
        background-color: rgba(100,0,0,0.5)
        }
header a
        {
        display: block;
        padding: 0.5em;
        text-decoration: none;
        color: rgba(100,0,0,0.9);
        }
header ul ul
        {
        display: none;
        position: absolute;
        }
header li:hover > ul
        {
        display: block;
        }
header ul ul ul
        {
        top: 0;
        left: 100%;
        }
header > ul > li > ul > li
        {
        min-width: 100%;
        }
<header>
<nav>
<ul>
<li>
    <a href="#"> Home </a>
<li>
    <a href="#"> About </a>
    <ul>
        <li><a href="#"> History </a>
        <li><a href="#"> Mission </a>
            <ul>
            <li><a href="#"> Vision </a>
            <li><a href="#"> Values </a>
                <ul>
                <li> <a href="#"> Team </a>
                <li> <a href="#"> Goals </a>
                </ul>
            </ul>
    </ul>
<li><a href="#"> Contact </a>
    </ul>
</header>

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

Stuffing a container with an image without considering the proportions

I am experimenting with filling a parent <div> with an image without concern for proportions. Despite knowing that it may not look great at all sizes, I just want to test its feasibility. Currently, the image is scaling instead of stretching to fit m ...

javascriptjqueryhtmlcssimage

Display a div when hovering over an image using jQuery

I've spent a good 30 minutes searching on Stack Overflow for a solution, but I haven't been able to find it yet. It's possible that I'm not sure what exactly to look for. Essentially, I have a div that contains an image and some text. ...

javascriptjqueryhtmlcss

Can anyone provide guidance on how to create this particular shadow effect using CSS?

Is there a method to use CSS to create a green shadow in that particular shape? ...

cssshadows

Move content off the screen using CSS3 translation

Throughout various projects, I have encountered the need to make elements on a webpage translate out of view (essentially making them fly out of the document). The idea was that by simply adding a class to the element, the CSS would take care of the animat ...

javascripthtmlcss

The ng-bind directive is functional when used with a textarea element, but it does not work with

Recently diving into the world of angularjs, I stumbled upon ng-bind and its interesting functionality when used as a directive for textarea: <input type="text" ng-model="review.start"/> <textarea ng-bind="review.start"> </textarea> I ...

javascripthtmlangularjs

Troubleshooting Highcharts container selection problem on Nexus 7 running version 4.2.1

Having a problem with Highcharts on my Nexus 7. When I touch the chart, the entire thing gets selected with a blue overlay, but this doesn't happen on other devices like the Nexus 4. Even when I try accessing demos from Highcharts website, the issue ...

javascriptandroidhtmlhighchartscordova

HTML list with clickable elements for querying the database and displaying the results in a <div> element

Patience please; I am a newcomer to StackOverflow and this is my inaugural question. Struggling with writing an effective algorithm, I wonder if my attempts to "push" it forward are causing me to complicate what should be a straightforward concept, or if i ...

javascriptphphtmlmysqlajax

Update the CSS of a different element when hovering

Hello to all the jQuery developers out there! I have a question that's fairly simple. I'm trying to change a CSS attribute for an element when I hover over a different element on the page. I've created a fiddle for you to review, and I&apos ...

jquerycsshover

Is there a way to display the avatar image outside of the drawer in MUI ReactJS?

Currently, I am attempting to display the avatar image with a curved effect outside the border line of the sidebar. I have referenced the persistent drawer from MUI v5 for inspiration. You can view an example here: the codesandbox link The desired outcom ...

cssreactjsflexboxreact-hooksmaterial-ui

Tips on using JQuery to extract form field information from a drop-down menu, display it in a div, and then compare it with the subsequently

In my HTML file, I am using two dropdown lists and JQuery for validation. First, I need to save the selected items from both dropdown lists in a variable and then compare them with the next selection. If the data from both dropdown lists match, an alert m ...

javascriptjqueryhtmlajaxjson

Tips for Placing a Div in a Precise Location

I'm currently working with Bootstrap and I'm attempting to replicate a layout similar to the one used by Twitter, as shown in the screenshot below. The specific part I'm struggling with is where the profile picture is located. I want to add ...

htmlcsstwitter-bootstrap

Verifying username using an Ajax call

Currently, I am working on developing a signup form using HTML/CSS/JS that involves utilizing an AJAX request to interact with the server. Within my jQuery code, I have implemented a method for validating the form inputs, which also triggers a function (en ...

javascriptphpjqueryhtmlajax

Is there a way to modify the background of a div when a specific field within my component is true and the div is being hovered over?

When I hover over a div, I want the background color to change. Additionally, I need the color choice to be based on an element within my component. <div *ngFor="let u of users;" [style:hover.background-color] = "u.selected ? 'red ...

htmlcssangular

What strategies can be implemented to minimize the impact of HTML code on just one specific div (or any other chosen element)?

<div> <b> some example </div> different content This will make the "different content" bold. Is there a way to restrict the impact of <b> only to the <div> element? I have tried looking for JavaScript solutions online but did ...

htmleffect

Set YouTube Playlist to start from a random index when embedded

I've been trying to figure out how to set my embedded playlist to start with a random video. Here's what I attempted: <iframe src="https://www.youtube.com/embed/videoseries?list=PLPmj00V6sF0s0k3Homcg1jkP0mLjddPgJ&index=<?php print(ran ...

javascriptphphtmlyoutube

Is it possible to save an entire webpage that infinitely scrolls without actually manually scrolling through it?

I'm dealing with a webpage that has infinite downward scrolling. I tried automating the scrolling, but eventually the page became too large to continue scrolling. To fix this, I manually removed some DIV blocks from the source code which decreased the ...

javascriptjqueryhtmlajaxinfinite-scroll

I'm having trouble pinpointing the origin of the gap at the top of my website, even after thoroughly reviewing all my tags

After setting margins and padding of 0 for both html and body, all my top-level elements inherited the same styling. I'm hoping to avoid using a hacky solution like adjusting the positioning. Any tips on how to achieve this without resorting to hacks ...

htmlcss

Steps for configuring jQuery hide(), adding Class, and remove Class for flawless execution

My HTML Code is structured as follows : ... @foreach($hotel as $key=>$value) ... <div class="iteration"> <input type='hidden' value='<?php echo $value['HCode'].'#' ...

javascriptjqueryhtmlajaxlaravel-5

Ionic version 4 ion-img eagerly preloads images instead of implementing lazy-loading

I recently created a horizontal scroller using FlexLayoutModule. It allows me to display a horizontally scrollable list where each item consists of an image and text column. Here's the relevant snippet from my scroller.component.html: <div class=" ...

cssionic-frameworkionic4

Click to move directly to a specific section

This question may be common, but despite my research efforts, I have been unable to find a solution. I want to issue a disclaimer that I am new to javascript and jQuery. Here is an overview of what I am trying to achieve: I want two images that, when cli ...

javascriptjqueryhtmlcssscroll