problem with hiding bootstrap dropdown

  1. Having trouble with Bootstrap, the dropdown menu is not hiding when I hover over the link. I want the dropdown to only show when I hover over it. Any help would be appreciated. Here is the code snippet: 
    
                    <nav>
                        <ul class="nav navbar-nav main-navigation">
                            <li><a href="">HOME</a></li>
                            <li><a href="">PORTFOLIO</a></li>
                            <li><a href="">BLOG</a></li>
                            <li><a href="">PAGES</a></li>
                            <li><a href="">FEATURES</a></li>
                            <li role="presentation" class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">MEGA MENU</a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li><a href="#">Separated link</a></li>
                               </ul>
                            </li>
                            <li><a href="">CONTACT</a></li>
                        </ul>
                    </nav>
javascriptjquerycsstwitter-bootstrap-3

Answer №1

Another option is to implement Jquery: https://jsfiddle.net/2w4n7pho/

<script>
    $(function(){
        $("li.dropdown").hover(function(){
            $(this).toggleClass("open");
        });
    });
</script>

Answer №2

If you're looking to have the Bootstrap (3.0+) dropdown menu appear on hover instead of click by default, you can achieve this with a simple CSS tweak. By using the code snippet below, you can make the dropdown menu display when hovering over the parent element:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

You can see a live demonstration of this in action here: http://www.bootply.com/tpCO1Nb4E8

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

Is there a way to keep my SVG aligned with the edge of the screen?

Hello, I'm new to CSS and currently attempting a front-end mentor challenge. However, I've hit a roadblock while trying to replicate this design. Here is the image I am trying to recreate: https://i.sstatic.net/7HmTg.png I'm struggling wi ...

css

Minimizing the Height of HTML Table Rows

I have a table with a few rows. I'm trying to set the height of the 1st and 3rd rows to 1px and keep the 2nd row at normal height. However, my code isn't working as expected. Here is the HTML CODE: <table border="0"> <tr style="hei ...

htmlcss

Testing the onClick event in React components using unit testing

I'm facing an issue with testing a Button wrapper component that utilizes a material-ui button. I tried writing some test code, but it's failing when trying to test the onClick event. index.tsx (ButtonWrapper Component) import React from &ap ...

javascriptreactjsunit-testingjestjs

The `terminateSession()` PHP function encapsulated within `$(window).unload`,

I'm currently developing a basic chat script that involves a killSession function. This function's purpose is to terminate the current session and remove the user from the database. However, I am encountering an issue where after setting and veri ...

phpjqueryfunction

Tips for adding up data tables in CodeIgniter

The output is displaying as $NaN ( $NaN total) I followed the code example from datatables and made modifications to the column for SUM function. Here is my code snippet: <script> $(document).ready(function() { $('#tableoperasional').Data ...

javascriptjquerycodeigniterdatatables

Converting the Angular Material Select Demo Stackblitz into a Self-Contained Component?

Attempting to transform the Angular Material Select Demo into a self-contained component. Check out the Stackblitz here. Here are the necessary steps: Replace main.ts with the following (To create standalone component): import { bootstrapApplication } f ...

javascriptangulartypescriptangular-materialstackblitz

What is the best way to add color to the "ngx-star-rating" component?

I've been experimenting with the ngx-star-rating plugin, and I've tested different approaches like fill and color, but nothing seems to be working! Can anyone provide suggestions on how to change the star rating color from yellow to a different c ...

cssangularbootstrap-4

VueJs: Finding the corresponding value of a data object

Is there a way to extract data from an object in Vue? This is the format of my data: datasets: [{ text:"Cars", value: "[1,2,3]" }, { text:"Trains", value: "[1,4,10] } ] When I receive information from route props like this: this.selectedText= this ...

javascriptvue.js

Execute the function upon clicking

When I click on an icon, I want it to blink. This is the code in my typescript file: onBlink() { this.action = true; setTimeout(() => { this.action = false; }, 1000) return this.action }; Here is how the action is declared in my ...

javascriptangular

Angular 2 - using bypassSecurityTrustHtml and bypassSecurityTrustScript to safely handle dynamic content

I would like to have a button on the left navigation side that, when clicked, will display a dynamic template (.html) on the right side in the content section. The path for the template (.html) will be fetched from a web service and will change each time w ...

javascripthtmltypescriptangular2-templateangular2-directives

Tips for accessing every "results" (parameters) from an API

Here is the response I received after making an API call in my attempt to retrieve each "bloc" result using a .forEach. const app = express(); const axios = require('axios') jobList = []; app.get('/getAPIResponse', function(req, res) ...

javascriptnode.jsexpress

Exploring the array pushing functionality in MongoDB

I have received a MongoDB query outputting two fields (110, 1; 105, 1; 105, 2). My goal is to store these results in an array for use in a while loop: 110, 1 105, 1 105, 2 I have attempted to create a function for this task, but my array remains empty: ...

javascriptarraysmongodbmeteor

How about this: "Looking to Share on Social Media with ME

After developing an app using MEAN.js, I made enhancements to the Articles (blog) section to improve SEO, readability, and design. However, one issue I'm struggling with is how to properly share these Articles on social media platforms like Facebook, ...

javascriptangularjsexpressmeanmeanjs

What steps do I need to take to integrate the turn.js JavaScript library with a Vue.js and Laravel project?

I am a Vuejs beginner currently working on a project that involves both Vuejs (front end) and Laravel (Backend). I have been trying to integrate the JQuery library turn.js into my project, but I keep encountering errors. While I have managed to run jQuery ...

jquerylaravelvue.jsflipturnjs

What is the method for utilizing the data-etc attribute value of an element for CSS property values?

Is it possible to use multiple data attributes in a single CSS style? I have created the following CSS, trying to utilize both data-letters and data-color, but it is not working as expected. The data-color attribute should dictate the background color, w ...

htmlcss

Access PHP variables in JavaScript

In my project, I have a file named english.php which holds various variable values stored in the $LANG array. For example: $LANG['value_1']="abc"; $LANG['value_2']="xyz"; In addition to numerous .php files that include require_once( ...

phpjavascript

Adding a byte array to a VARBINARY column in MySQL using Sequelize

I'm encountering an issue where I need to store a byte array in a VARBINARY column in MySQL using Sequelize. Following guidance from this particular response, I have set up my table like this: MyTable = sequelize.define('my_table', { my_c ...

javascriptmysqlnode.jssequelize.js

Send a jQuery variable to PHP from within the same jQuery script

As a beginner in coding, I am seeking assistance with passing a jQuery variable to PHP within the same jQuery script. Below is an example of what I have tried: <script language="javascript"> $(document).ready(function(){ $("#option1).change(function ...

javascriptphp

Should code in Vuejs be spread out among multiple components or consolidated into a single component?

After spending a significant amount of time working with Vue, I find myself facing a dilemma now that my app has grown in size. Organizing it efficiently has become a challenge. I grasp the concept of components and their usefulness in scenarios where the ...

javascriptvue.jsvue-componentcode-organization

Best Practices for Closing MySQL Connections in Node.js

Currently, I am working on a project using Node.js in combination with Express and MySQL. My main concern at the moment is regarding the closing of the connection to MySQL. The code snippet for this operation is provided below: iniciarSesion(correo_el ...

javascriptmysqlnode.jsexpress