Display the dropdown submenu within the DIV upon hovering

Looking to create a hover/drop menu using DIVs without UL/LI elements. The current menu displays 3 options, but I want to add a submenu under Link 2.

.dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 0px;
            font-size: 12px;
            border: none;
            cursor: pointer;
        }
        
        .dropdown {
            margin-top:200px;
            position: relative;
            display: inline-block;
        }
        
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 30px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        ...

        
<div class="dropdown">
          <button class="dropbtn">^</button>
          <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
        </div>

Desiring the following structure:

<div class="dropdown">
      <button class="dropbtn">^</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
            <div class="submenu">
                <a href="#">SubLink 1</a>
            </div>
        <a href="#">Link 3</a>
      </div>
    </div>

Require SubLink 1 to appear when hovering over Link 2. Have attempted multiple solutions without success, seeking assistance from others.

cssdrop-down-menuhover

Answer №1

To implement this functionality, you can achieve it by configuring a div element (referred to as submenu_holder) that includes the submenu and the link for hover interaction. Follow these steps: First, set up the submenu_holder in a similar way to how dropdowns are structured.

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 0px;
    font-size: 12px;
    border: none;
    cursor: pointer;
}

.dropdown {
    margin-top:200px;
    position: relative;
    display: inline-block;
}

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

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

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

.dropdown:hover .dropdown-content {
    display: block;
    bottom: 100%;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

.subdiv {
    display:none;
}

.dropdown:hover .subdiv {
    display:block;
}

.submenu {
    display:none;
    position:absolute;
    left:60px;
    top:0px;
}

.submenu_holder:hover .submenu {
    display:block;
}

.submenu_holder {
    position:relative;
}
<div class="dropdown">
  <button class="dropbtn">^</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <div class="submenu_holder">
      <a href="#">Link 2</a>
      <div class="submenu">
        <a href="#">SubLink 1</a>
      </div>
    </div>
    <a href="#">Link 3</a>
  </div>
</div>

Answer №2

There were a few issues with the code that need to be addressed.

Firstly, the class names for the submenu were not correctly matched.

To improve the hover effect, I have enclosed the content of the submenu inside Link 2. However, further adjustments will still be needed...

body {
  /* added for demonstration purposes */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 0px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  /* adjusted due to small size in demo */
  padding: 1em;
}

.dropdown {
  position: relative;
  display: inline-block;
}

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

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

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

.dropdown:hover .dropdown-content {
  display: block;
  bottom: 100%;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

.submenu {
  padding: 12px 16px;
}

.submenu-content {
  display: none;
}

.submenu-content a {
  padding: 12px 0;
}

.submenu:hover .submenu-content {
  display: block;
}
<div class="dropdown">
  <button class="dropbtn">^</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
To achieve the desired layout:

<div class="dropdown">
  <button class="dropbtn">^</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <div class="submenu">Link 2
      <div class="submenu-content">
        <a href="#">SubLink 1</a>
      </div>
    </div>
    <a href="#">Link 3</a>
  </div>
</div>

Answer №3

After much trial and error, I have finally settled on this code snippet that perfectly fits my needs:

<style>

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 0px;
    font-size: 12px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

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

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

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

.dropdown:hover .dropdown-content {
    display: block;
    bottom: 100%;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

.subdiv {
    display:none;
}

.dropdown:hover .subdiv {
    display:block;
}

.submenu {
  display:none;
  position:absolute;
  left:86px;
  top:0px;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.submenu_holder:hover .submenu {
  display:block;
}

.submenu_holder {
  position:relative;
}

</style>


<div class="dropdown">
  <button class="dropbtn">^</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <div class="submenu_holder">
      <a href="#">Link 2</a>
      <div class="submenu">
        <a href="#">SubLink 1</a>
      </div>
    </div>
    <a href="#">Link 3</a>
  </div>
</div>

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

Generating a hyperlink to a specific user ID within a data table

I'm facing an issue with the formatting of my simple table when trying to navigate to user.id. Is there a better approach to this or should I consider moving LinkToUser? All styling has been removed to avoid any conflicts. import styled from 'st ...

javascripthtmlcssreactjsstyled-components

What is the best way to use toggleClass on a specific element that has been extended

I have been experimenting with this code snippet for a while. The idea is that when I hover my mouse over the black box, a red box should appear. However, it doesn't seem to be working as expected. Could someone please review this script and let me k ...

javascriptjquerycsshtmltoggle

An element that stands alone, not contained within another element

When working with the following HTML structure: <div> <span class="style-me">i want to be styled</span> </div> <div class="ignore-my-descendants"> <span class="style-me">i want to be styled but my parent prevent ...

csscss-selectors

Creating a text design that spans two lines using Scalable Vector Graphics (SVG

I am working with an SVG that displays strings pulled from an Array... {"label":"Here is an example of the string...", "value":4}, The text above is shown in an SVG element as... <text>Here is an example of the string...<text> I would like ...

javascriptjquerycsssvg

connecting to a particular segment within the current html page

One issue I'm facing is with a large fixed header that covers the content when navigating to HTML id links. Is there a way to adjust the position slightly higher within an id section using CSS? ...

htmlcss

Clicking to enter fullscreen mode on a website will result in the Fullscreen API automatically closing

For my current project, I am creating an offline website and would like it to display in full screen when opened. I have been using the Fullscreen API, but it exits fullscreen mode when a user navigates to another page. After researching the issue, it seem ...

javascriptjquerycsshtmlfullscreen

Using div elements with a data attribute labeled as title in order to implement an accordion feature

Here is the structure I am working with to display titles before the corresponding div with data-attribute. I am aiming to achieve this layout: 1st Title 2nd Title 3rd Title 4th Title When "1st Title" is clicked, the layout should transform into: 1s ...

jqueryhtmlcssaccordion

Adding a sign at the center of a map in React-Leaflet

One of the features I added to the map is a center indicator sign. <MapContainer fullscreenControl={true} center={center} zoom={18} maxNativeZoom = {22} maxZoom={22} classNa ...

javascriptcssreactjsleafletreact-leaflet

Looking to add a glowing effect to a div when hovered using jQuery

Seeking assistance to add a glow effect to a div when hovered using jQuery. Below is the code snippet: HTML <div class="tablerow"> <div class="image"> <img src="1.jpg"> </div> <div class="info"> ...

jqueryhtmlcss

Certain characters may not display correctly in HTML

I am facing an issue with displaying the logo title on my webpage, where some letters are not appearing correctly. For example: The text "eChampion" is not displayed However, when all letters are in uppercase like "ECHAMPION", they appear correctly. I ...

htmlcss

Discovering and choosing the appropriate course

I am facing a situation where I need to specifically select an element with the class .foo, but there are two anchor tags, both having the class .foo. However, I only want to select the one without the additional .bar class. How can I achieve this? <a ...

javascriptjquerycsscss-selectors

Switch up the design on Bootstrap 4 navigation tabs

Trying to customize the appearance of the current tab in a nav-tabs setup has been a bit challenging. I've created a simple file to test this functionality. When a tab is clicked, the content switches correctly, but I'm struggling to apply specif ...

cssbootstrap-4

What is the best way to retrieve the highest value from a CSS file for use in a .js controller in Sencha

Being new to the world of sencha touch, I am in the process of developing an application for iOS using sencha touch. In my app.css file, I defined a style for a label using the class "top". Here's what I tried: console.log(Ext.getCmp('location_l ...

iosiphonecsssencha-touch

Use CSS alignment to combine both the profile picture and title on a webpage

Is there a way to seamlessly integrate a profile picture with text (title) on my tumblr theme? My main challenge lies in getting the alignment right. Additionally, I want it to look good in responsive view. If the title becomes too long, it should wrap un ...

htmlimagecssalignmenttumblr

Uncover the HTML tag associated with specific text on a webpage with the help of selenium

<div class="searchSummary floatL"> <span>18</span> results for "gloves" </div> Can someone assist me in using Selenium to extract the 'span' tag containing '18'? I am trying to specifically retrieve the 'sp ...

cssseleniumselenium-rc

Injecting a variety of wallpapers dynamically using css and html

As a beginner in CSS, HTML, and coding in general, I am currently working on creating my own start page with a local path that loads my bookmarks using an HTML file. The background-image control is handled by the style.css file. I have researched ways to c ...

phphtmlcssimagerandom

Adjusting transparency on various DIV elements

Currently, I am working on implementing the 'OnClick' functionality in jQuery. The goal is to have only the parent div and its child divs displayed when we click on the parent div property, while fading out all other divs. Below you can find the ...

jquerycsshtml

The CSS transition for changing the background image of a div upon hover is not functioning properly

I am attempting to add a transition effect on hover to a div element. Despite creating CSS code for the transition, it does not seem to be working properly in Chrome or Firefox. #header { border: 0.1px solid #666; background-image: linear-gradi ...

htmlcssbackground-imagecss-transitions

Center align a row with the help of Bootstrap 4.0

Here is some code with Bootstrap 4 classes that I am working with: <div class="container"> <div class="row"> <div class="col-xl-4 col-md-6 col-lg-4"> <div class="footer_widget"> <h3 class ...

csstwitter-bootstrapbootstrap-4

Steps for revealing all the information from a database when clicking on the 'Read More' button

I recently set up a database called Magazine, featuring a table named social_media. This table consists of 5 columns: ID, Headline, Author, Content Short, Content. The Content Short column contains condensed versions of the articles which are displayed on ...

phphtmlcss