Hover-activated dropdown submenu feature in Bootstrap 4.1

Currently, I am in the process of developing a website and aiming to incorporate a dropdown submenu feature that activates on hover using Bootstrap 4.1

To achieve this effect, I have utilized the following HTML code:

<div class="navbar-collapse text-center" id="navbarResponsive">
  <ul class="navbar-nav ml-auto">

    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Main Menu
    </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">P</a>
        <a class="dropdown-item" href="#">Q</a>
        <a class="dropdown-item" href="#">R</a>
        <a class="dropdown-item" href="#">S</a>
      </div>
    </li>

    <button type="submit" onclick="location.href='/M';" class="btn btn-default">R</button>

  </ul>
</div>

The current HTML code successfully displays P, Q, R, and S on hover.



Issue at Hand:

I am now faced with the challenge of modifying the code above to display dropdown items T, U, V, and W when hovering over S. Any suggestions on what changes need to be made to accomplish this task?

htmlcssdrop-down-menuhoverbootstrap-4

Answer №1

You can implement the inception idea by placing another dropdown-toggle element within the menu.

To trigger the sub-menu on hover, enclose the content in a container and use the :hover CSS styling to display the submenu links with display:block. 

/* show main-menu on hover */
.menu-item:hover > .dropdown-menu {
  display: block;
}

/* show sub-menu S on hover */
.submenu-item:hover > .dropdown-menu {
  display: block;
}
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

<div class="navbar-collapse text-center" id="navbarResponsive">
  <ul class="navbar-nav ml-auto">

    <li class="menu-item nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Main Menu
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">P</a>
        <a class="dropdown-item" href="#">Q</a>
        <a class="dropdown-item" href="#">R</a>
        <div class="submenu-item">
          <a class="dropdown-item dropdown-toggle dropright" href="#" id="navbarDropdownSubMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            S
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownSubMenuLink">
            <a class="dropdown-item" href="#">T</a>
            <a class="dropdown-item" href="#">U</a>
            <a class="dropdown-item" href="#">V</a>
            <a class="dropdown-item" href="#">W</a>
          </div>
        </div>
      </div>
    </li>

    <button type="submit" onclick="location.href='/M';" class="btn btn-default">Button R</button>
  </ul>
</div>

Answer №2

It seems like the default bootstrap 4.1 classes don't allow for that specific functionality.

If you want to achieve this effect, you'll need to use a combination of jQuery and CSS.

Start by creating a div with a custom class and a list containing the items you want to display (such as TUVW).

In your CSS, hide the list container and adjust its position as needed.

With jQuery, you can set up a function to track mouse hover events ('mouseenter' and 'mouseleave') and show or hide the list container accordingly.

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

Display all information associated with the class that matches the clicked ID

Can anyone help me with a Jquery question? I am trying to display all data with the same class when I click on it. I have created a list of clickable items. When I click on an item, the corresponding data should be shown. However, the code I wrote is not ...

javascriptjqueryhtml

Design a food selection with only CSS and HTML

I am working with a menu structure that looks like this: <ul class"menu"> <li> <a>item1</a> <ul> <li><a>subitem1</a></li> <li><a>subitem2</a></li> &l ...

htmlcssmenu

How can I send styles to a child component and utilize them as scoped styles within Vue?

One of my components is a parent: <template> <ChildComponent :styles="styles" /> </template> <script> export default { data: () => ({ styles: ` p { color: red } ` ...

javascriptcssvue.jsvue-component

Using Javascript to generate a button that randomly chooses links within the webpage

Looking for help with JavaScript to select a link when a button is clicked on the page? Check out my code and let me know what I'm doing wrong. For the full code, visit: here HTML <!doctype html> <html lang="it" xmlns="http:/ ...

javascripthtmlcssfunctionif-statement

A workaround for background-size in Internet Explorer 7

Currently, I am working on a project at this link: Everything seems to be functioning well in Firefox and Chrome, however, I have encountered an issue with the background-size property not being supported in IE7. I heavily rely on this property throughout ...

cssinternet-explorer-7

Troubleshooting problems with image display following jQuery animation

Check out this awesome page I found: where you can see a neat list of blog posts displayed in rows of 4. I've added a cool jQuery animation to the 'cards' so that they fade in one by one: jQuery('.fade-in-post-container .elementor-po ...

javascriptjqueryhtmlcss

In Chrome browser, the orientation of the options in the datalist remains consistent

Is there a way to change the direction of the datalist's options to RTL? While I'm able to change the direction of the input element, the same doesn't apply to the options of the datalist. I've attempted setting the dir attribute to r ...

htmlcssgoogle-chrome

strange occurrences of bootstrap.min.css.map popping up

While working on my e-commerce website using Node, Express, Mongoose, and Bootstrap, I encountered an unexpected issue related to "bootstrap.min.css.map". The error 'Cast to ObjectId failed for value "bootstrap.min.css.map" at path "_id" for model " ...

htmlcssnode.jsexpressbootstrap-4

Automatically fill in checkboxes based on user input

Having a simple problem here, I am attempting to dynamically populate check-boxes in an HTML form. However, when I try using the checked property of the checkbox in HTML, it doesn't work correctly. The checkbox remains checked whether I use checked=&a ...

phpjavascripthtml

Hover over this area to reveal the hidden text as it slides into view

My goal is to hover over truncated text and reveal the full length of the dynamic text. However, I am struggling with removing extra space at the end of shorter text when hovered and displaying all the text for longer ones. I have a solution that almost w ...

htmlcsshover

Using jQuery to sift through and sort through content

I have successfully implemented a basic filter using HTML and jQuery. The issue I am facing is that when all filter options are unchecked, it displays no results. My goal is to modify the functionality so that when all checkboxes are deselected, it automa ...

htmljqueryfunctionfilter

Utilizing keyboard shortcuts for webpage navigation (within a content script)

Just to clarify, I'm not looking for code assistance right now. I mostly need a starting point. My goal is to create a Chrome browser extension that enables me to use keyboard keys for navigation on a specific webpage. The page in question belongs t ...

javascriptphphtml

Struggling to make basic PHP code function properly: a straightforward elseif statement to switch images at specified intervals

The issue I'm facing seems to revolve around my PHP code. I am currently hosted on GoDaddy and have set up a basic password protection using an .htaccess file for a client's website. However, my PHP code is not functioning as expected. I am new t ...

phphtmlapache.htaccess

The 'Bfrip' button is missing from the DOM

Having some issues with displaying table content using DataTables. Everything seems to be working smoothly except for the Buttons, which are not appearing as expected. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.1 ...

javascriptphpjquerycssdatatables

issues with verifying form data in a popup window using jquery

Hello, I'm struggling to understand why this form isn't validating upon submission. I've chosen not to use jQuery's built-in validate function in this case. Essentially, the code is designed to show an error image and prevent form submi ...

jquerycss

Ways to implement a placeholder height for images on a webpage with varying heights using HTML

I'm facing an issue with an image on my website that has a dynamic width and height as defined by the following CSS: .sm_item_image { width:100%; height:auto; max-width:400px; } The problem arises when the image takes some time to load, ...

javascripthtmlcss

Stylish CSS popup backdrop

I have very limited CSS knowledge and struggle with the syntax, but I am trying to customize my Wikipedia experience using Chrome and the Stylish addon. I found some code online and modified it to create a dark theme, but now I'm stuck because I need ...

htmlcssstylish

What could be causing the Bootstrap div.navbar to appear in Safari but not in Firefox or Chrome while using the collapsednav feature?

Encountering a strange issue with Bootstrap here! Despite trying various solutions, I can't seem to get rid of the navbar navbar-default showing below Bootstrap's nav toggle in Safari. Strangely, it doesn't appear in Firefox or Chrome. I rea ...

htmlcsstwitter-bootstrapnav

Tips for aligning the title to the left of text within a Bootstrap 4 card component

I have a situation where I need to adjust the layout of a card item in Bootstrap 4. Specifically, I want to move the title to the left of the text for screens that are not mobile. Is there a way to achieve this? Thank you! <div class="card flex-row fle ...

cssbootstrap-4

Activate a .click() event on a hyperlink exclusively in mobile view

Currently, I am working on a WordPress website that utilizes a Table of Contents plugin. The plugin simply identifies headings and adds them to the table of contents. I am aiming to achieve a specific functionality on my website (). When the window width ...

javascripthtmlcss