The dropdown submenu in Bootstrap 3 remains persistently open

I'm currently working on creating a submenu dropdown and following this reference link:

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_events2&stacked=h

However, I am facing an issue where all my submenus are always open. I want them to operate normally, where the submenu will only appear when I hover over the parent menu. I am using Bootstrap 3.3.7.

Referencing the image provided below, even when I press the "CLICK" button, the submenus remain constantly open (menu 3 and menu 4) https://i.sstatic.net/BVCF0.png

This is the code snippet in question:

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">CLICK
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">MENU 1</a></li>
      <li><a tabindex="-1" href="#">MENU 2</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">MENU 3</a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">MENU 3.1</a></li>
          <li><a tabindex="-1" href="#">MENU 3.2</a></li>
        </ul>
      </li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">MENU 4</a>
       <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">MENU 4.1</a></li>
          <li><a tabindex="-1" href="#">MENU 4.2</a></li>
        </ul>
      </li>
    </ul>
</div>


// style
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
     height: 0;
    border-color: transparent;
     border-style: solid;
    border-width: 5px 0 5px 5px;
   border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

Answer №1

Make sure to utilize the display:none property and then trigger a display:block on hover.

// CSS style for dropdown submenu
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu .dropdown-menu {
    display: none;
}
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}
<div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">CLICK
                        <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                          <li><a tabindex="-1" href="#">MENU 1</a></li>
                          <li><a tabindex="-1" href="#">MENU 2</a></li>
                          <li class="dropdown-submenu">
                            <a class="test" tabindex="-1" href="#">MENU 3</a>
                            <ul class="dropdown-menu">
                              <li><a tabindex="-1" href="#">MENU 3.1</a></li>
                              <li><a tabindex="-1" href="#">MENU 3.2</a></li>
                            </ul>
                          </li>
                          <li class="dropdown-submenu">
                            <a class="test" tabindex="-1" href="#">MENU 4</a>
                            <ul class="dropdown-menu">
                              <li><a tabindex="-1" href="#">MENU 4.1</a></li>
                              <li><a tabindex="-1" href="#">MENU 4.2</a></li>
                            </ul>
                          </li>
                        </ul>
                    </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

Adjusting the transparency for every <td> element except for one child within the final <td>

<tbody id="items"> <tr><td>Item 1</td></tr> <tr><td>Item 2</td></tr> <tr><td>Item 3</td></tr> <tr><td>Item 4</td></tr> <tr><td> ...

The height transition on a Bootstrap modal is not functioning as expected

I am currently utilizing a Bootstrap (v3) modal for the login screen on my website. Within this login screen, there is a "password forgotten" button that triggers a simple jQuery function to hide the main login form and display the forgotten password form. ...

Height and width not being properly set by Ngx-Bootstrap popover

Struggling to integrate ngx-bootstrap into my Ionic 2 / Angular 2 application. The popover seems to be having issues with its display in the view: <button placement="right" [outsideClick]="true" popover="this is a test text for the popover conten ...

I aim to place my :after content in mobile view or lower resolutions

I have a testimonial section built with HTML and CSS. You can view the demo on JSFIDDLE HERE. In the mobile view, I am facing an issue where the ":after" content is not aligning properly or appears misplaced. I'm looking for ideas to ensure that it re ...

The Animation effect of jQuery Making an Element Move Down

After playing around with a jsFiddle, I'm faced with a dilemma. When I try to animate a "drawer" using jQuery, my text mysteriously jumps down a few pixels during the slide animation. It's puzzling me and I'm struggling to pinpoint the cause ...

Faux CSS, every other moment appears to be unsuccessful

My HTML code looks like this: <div class="container"> <div class="foo">Foo!</div> <!-- if this is red... --> <div class="bar">Bar!</div> </div> <div class="container"> <div class="foo">Foo! ...

Tips on avoiding the collapse of the right div when positioned under a left float in a full page layout

Trying out a full page layout for the first time, with a left div serving as a block style nav. #admin_nav { width: 230px; height: 100%; background-color: #f9f9f9; border-right: 1px solid #ddd; float: left; } The content is on the rig ...

Vue.js does not support the usage of external JSON files directly within HTML documents

I'm encountering issues fetching data from an external JSON file for a specific variable. I suspect that the problem lies in using Vue.js within the HTML, as it seems to be having trouble interpreting my code correctly.:joy: jsfiddle Additionally, I ...

Can we leverage Angular service styles in scss?

I am working on a change-color.service.ts file that contains the following code snippet: public defaultStyles = { firstDesignBackgroundColor: '#a31329', firstDesignFontColor: '#ffffff', secondDesignBackgroundColor: '#d1 ...

How can I create two left-aligned columns in CSS, with the first column being fixed in place?

Is there a way to create two columns without using HTML tables? I'm looking for the first column to contain an image and the second column to display text aligned left, extending to the rest of the page width. I found this CSS solution for the first ...

Issues arising with the functionality of CSS media queries when used in conjunction with the

I created a webpage that is functioning well and responsive on its own. However, when I integrate the same files with the Spring framework, the responsiveness of the webpage seems to be lost. To ensure the responsiveness of the Spring webpage, I tested it ...

Maintain HOVER State in CSS Drop Down Menu upon Clicking

I have implemented a CSS Drop Down Menu on my website. In a specific section of the site, I am using the menu links to trigger AJAX-jQuery calls that dynamically change the content of a DIV without the need for page reloading. <script type="text/javasc ...

iOS devices are experiencing issues with touchstart and touchend events not functioning when utilizing jquery mobile and cordova

During a previous project, I encountered no problems with the following code snippet. It effectively utilized touchstart and touchend events to adjust the CSS of a button: <script> $('input[type="button"]').on('touchstart', func ...

Ways to Get Rid of Line Beneath the Table

Can anyone assist me in removing the underline at the bottom of my table? Here is the code I am using: <table> <tbody> <tr> <td><iframe src="//player.vimeo.com/video/99496559" width="220" height="150" frameborder="0" allowfull ...

Experimenting with @media queries to dynamically resize images for various devices such as phones, tablets, and desktop

I'm struggling with making the background images on my website responsive. I have already added media queries to my page, but they seem ineffective and I am unsure of what else to try. Below are the HTML and CSS codes for the three images. Any suggest ...

A Simple Guide to Mastering the Flexbox Columns Concept

After exploring flexbox for some time and finally grasping its potential, I wanted to share an example showcasing how simple it is to create flexible column layouts without the need for CSS hacks involving excessive margins and paddings. I understand that ...

Responsive background image not displaying properly

The developer site can be found at http://www.clhdesigns.com/cliwork/wintermeresod/about.php I am encountering an issue where the background image on the home page scales perfectly, but on the about us page it does not scale at all. I am seeking a solutio ...

What is the method for changing the icon color to dark in Twitter Bootstrap?

I am facing an issue where the icon in my menu tab turns white when active, making it difficult to see. Is there a way to change the color of the icon to black? I have found a class icon-white to make it white, but there is no corresponding class to make ...

Exploring the process of integrating absolute paths within a global SCSS file in a VueJS project

The webpack configuration in my vue.config.js file looks like this: const path = require("path"); module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'scss', patterns: [ "./src/style ...

Tips for aligning a text box field in the center using Bootstrap

I'm having trouble centering a text field on my screen. No matter what I try, it stays aligned to the left. How can I fix this and get it centered? <div class="form-row"> <div class="col-md-4 col-md-offset-4"> ...