This question already has answers here:
Make floating child visible outside an overflow:hidden parent
(6 answers)
Closed 4 years ago.
I have a the following dropdown html structure and css, it's parent has an overflow hidden -
The problem I am having is that when you select the dropdown, it is cut off by the overflow hidden, I need it to ignore the overflow.
I have looked at changing the dropdowns position to fixed, but then I would need to calculate its position for each dropdown, any other suggestions would help!
.overflow-container {
display: block;
height: 60px !important;
overflow: auto;
overflow-x: hidden;
float: left;
background-color: #eaeaea;
padding: 20px;
}
.dropdown-container:hover .dropdown1 {
display: block;
}
.dropdown1 {
display: none;
}
<div class="overflow-container">
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
</div>
See working JSFiddle - https://jsfiddle.net/DarianSteyn/oq1w6eds/7/
The structure is built using a plugin which sets the html and css. I am able to change the css but not the html structure. I also cant change the height of the parent, it needs to be scrollable if there are multiple dropdowns.
Use position:absolute and use margin or translate to adjust the position. Then don't add position:relative to the parent element so it get ignored by the overflow.
.overflow-container {
display: block;
height: 60px !important;
overflow: auto;
overflow-x: hidden;
float: left;
background-color: #eaeaea;
padding: 20px;
}
.dropdown-container:hover .dropdown1 {
display: block;
}
.dropdown1 {
display: none;
position:absolute;
margin-left:100px;
margin-top:-10px;
}
<div class="overflow-container">
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
</div>
Related
I am attempting to use two selectable lists with the same selectable class, I want to toggle all the items irrespective of the parent list when a selection is made.
Currently when I select an item, only the selections from the same list get toggled/unselected, but the selected item from the other list remains selected.
Is there any way to have these as two separate lists but behave as the same one, for this specific function?
Any help would be appreciated. Thank You.
$( ".selectable" ).selectable();
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
div {border:1px solid black;}
.selectable .ui-selecting { background: #FECA40; }
.selectable .ui-selected { background: #F39814; color: white; }
.selectable { list-style-type: none; margin: 0; width: 60%; }
.selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<div id="div1">
<h4>List 1</h4>
<ul class="selectable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div id="div2">
<h4>List 2</h4>
<ul class="selectable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
I suppose what I was trying to achieve here is what is defined under a different widget, you would call menu.
Changing the script to:
$(".selectable").menu();
gave the desired result.
I'm trying to slide each ul > li down when hovering over it's parent li and then slide it back up on the mouseleave event
The code works great on the first mouseenter and mouseleave. But when I hover my mouse back over a panel that has already fired once, the mouseenter function doesn't fire a second time I'm know I'm close but not sure where I went wrong
Fiddle away here:
http://jsfiddle.net/k2b5a62j/1/
I've tried the fiddle with hover as well with no luck
**I've updated the fiddle a bit for simplicity
I am pretty sure what you mean is, you want, on hover, to be able to view all the items rather than them immediately disappearing. I slightly changed your DOM and jQuery selectors to achieve this:
//Per comment of the original poster:
$('ul li div').on("mouseenter", function(event){
$(this).find('ul').slideDown('fast', function(){
// Done.
});
event.preventDefault();
}).on("mouseleave",function (event) {
$(this).find('ul').slideUp('fast', function(){
// Done.
});
event.preventDefault();
});
ul li ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li><div>
Product1
<ul id="test">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div></li>
<li><div>Product2
<ul>
<li>Item product 2</li>
<li>Item product 2</li>
<li>Item product 2</li>
</ul>
</div></li>
<li><div>Product3
<ul>
<li>Item product 2</li>
<li>Item product 2</li>
</ul>
</div></li>
</ul>
</div>
Reply to the asker's comment as to have each li display one at a time:
jQuery(document).ready(function($) {
$('.inner-link').hide();
$('.link').mouseenter(function() {
$(this)
.find('ul')
.find('li')
.stop(true,true)
.each(function(index) {
$(this)
.delay(500 * index)
.slideDown(500);
});
});
$('.link').mouseleave(function() {
$(this)
.find('ul')
.find('li')
.stop(true,true)
.each(function(index) {
$(this)
.delay(500 * index)
.slideUp(500);
});
});
});
.link {
position: relative;
right: 0%;
width: 8%;
list-style-type: none;
vertical-align: middle;
display: table-cell;
outline: none;
height: 100%;
text-align: center;
margin: 0px 11px;
}
.inner-list {
position: absolute;
width: 100%;
margin: 0px auto;
left: 0px;
}
.inner-link {
list-style-type: none;
width: 100%;
margin: 0px 0px 0px -40px;
border-bottom: 1px black solid;
}
.inner-link:first-child {
padding-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-container">
<li class="link">Panel 1
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Link #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 2
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Link #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 3
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Linnk #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 4
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Linnk #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
</ul>
I have recently started designing a mobile website using media queries and browsing a few websites to see what they've done it seems accordion navigation menus are the way to go, scaling up to a normal horizontal navigation bar. I have browsed and browsed the internet looking for an accordion walkthrough but I can not seem to find one that explains it well enough.
A good example is the one from microsoft on their website. Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
#topMenu {
height: 50px;
width: 100%;
background-color: #cde;
display: block;
}
nav {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
padding-left: 40px;
}
nav ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
background-color: #ccc;
}
nav ul li {
display: block;
width: 100%;
padding: 20px 0px 20px 0px;
border-top: 2px solid #abc;
}
nav ul ul {
height: 0;
overflow: hidden;
padding-top: 0px;
}
nav ul ul li a {
padding-left: 100px;
}
</style>
</head>
<body>
<div id="topMenu"></div>
<nav>
<ul>
<li>Link</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</html>
These navigation bars have submenus [nav ul ul] that slide out when nav ul li is clicked. I was hoping somebody could point me in the right direction as to how I go about making a slide down sub menu on click, or help me with the code.
I thought there may have been a basic one people could start using and edit to customise themselves.
Thanks for any help.
There is no need for Javascript - you may use a Checkbox instead.
Check out: http://codepen.io/TimPietrusky/pen/CLIsl
If you still want to do it with Javascript go for something like this:
// asuming, that nav-items that should trigger slidedown will have "#" as href
// while actual nav-items will have URLs
$('nav li a[href="#"]').on('click', function (e) {
// prevent Click from redirecting
e.preventDefault();
// get the next ul after the li a clicked
if ($(this).hasClass('visible')) {
$(this).next('ul').slideUp(200).removeClass("visible");
} $(this).next('ul').slideDown(200).addClass("visible");
});
CSS animation for height form 0 to auto wont work. See: How can I transition height: 0; to height: auto; using CSS?
Check this out
https://jsfiddle.net/nqamazgz/3/
Unfortunately CSS does not have any click events, instead you will need to use JavaScript and/or jQuery. I used jQuery
All i did was add a class hide-nav to your nav with display none. And a button to click of course.
And a bit of jQuery
$(document).ready(function() {
$('#topMenu-btn').on('click', function() {
$('nav').slideToggle();
});
});
Try something like this:
http://jsfiddle.net/kb668aag/
You'll need to modify the code a bit.
<div id="topMenu"></div>
<nav>
<ul>
<li>Link</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
CSS
body {
padding: 0;
margin: 0;
}
#topMenu {
height: 50px;
width: 100%;
background-color: #cde;
display: block;
}
nav {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
padding-left: 40px;
padding: 20px 40px;
display: block;
}
nav ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
background-color: #ccc;
}
nav ul li {
display: block;
width: 100%;
border-top: 2px solid #abc;
}
nav ul ul {
overflow: hidden;
padding-top: 0px;
}
nav ul ul li a {
padding-left: 100px;
}
ul.sub-menu{
display: none;
}
.has_children > a{
color: #ddd;
}
JS:
var $menu_with_children = $('.has_children > a');
$menu_with_children.on('click', function(e){
e.preventDefault();
var $this = $(this);
if (!$this.parent().find('> .sub-menu').hasClass('visible')) {
$this.parent().find('> .sub-menu').addClass('visible').slideDown('slow');
} else{
$this.parent().find('> .sub-menu').removeClass('visible').slideUp('slow');
}
});
I created a dropdown menu and below is my snippet. The problem is whenever I tried to go to the dropdown part (the one that has a class of dropdown_menu) menu after I click the link that triggered it, it will slideUp which supposedly it will not as it is also inside with the .has_dp element, any ideas? Im wondering if the best solution is to bind the .dropdown_menu element with the mouseleave event of the .has_dp so that the .dropdown_menu will only slideUp if the cursor is not over on the .has_dp and .dropdown_menu, is that possible?
$(document).ready(function(){
//main declarations
$(".thehide").hide();
//dropdown menu
$(".has_dp").click(function(){
$(".dropdown_menu", this).slideDown();
}).mouseout(function(){
$(".dropdown_menu", this).slideUp();
});
});
/* navigation */
#topnav{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#topnav li{
float: left;
list-style: none;
}
#topnav li a{
display: block;
padding: 5px 8px;
color: red;
text-transform: uppercase;
}
#topnav li a span{
float: left;
display: block;
}
#topnav li a span:first-child{
margin-right: 3px;
}
#topnav li a span:last-child{
padding-top: 2px;
}
#topnav li a.active_menu, #topnav li a:active, #topnav li a:hover{
color: blue;
}
/* dropdown */
.dropdown_menu{
z-index: 999;
position: absolute;
background: #263238;
padding: 10px;
margin-top: 15px;
}
.dropdown_menu li{
clear: both;
float: none;
}
.dropdown_menu a{
clear: both;
float: none;
display: block;
padding: 5px 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav extend clear" id="topnav">
<li>Home</li>
<li class="has_dp">
<span>Company</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>Company dropdown menu 1</li>
<li>Company dropdown menu 2</li>
<li>Company dropdown menu 3</li>
<li>Company dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>HR</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>HR dropdown menu 1</li>
<li>HR dropdown menu 2</li>
<li>HR dropdown menu 3</li>
<li>HR dropdown menu 4</li>
</ul>
</li>
<li>Assets</li>
<li>Employees</li>
<li class="has_dp">
<span>expenses</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>expenses dropdown menu 1</li>
<li>expenses dropdown menu 2</li>
<li>expenses dropdown menu 3</li>
<li>expenses dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>PERFORMANCE</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>PERFORMANCE dropdown menu 1</li>
<li>PERFOMANCE dropdown menu 2</li>
<li>PERFORMANCE dropdown menu 3</li>
<li>PERFORMANCE dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>recruitment</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>RECRUITMENT dropdown menu 1</li>
<li>RECRUITMENT dropdown menu 2</li>
<li>RECRUITMENT dropdown menu 3</li>
<li>RECRUITMENT dropdown menu 4</li>
</ul>
</li>
<li>reporting</li>
<li class="has_dp">
<span>self service</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>SELF SERVICE dropdown menu 1</li>
<li>SELF SERVICE dropdown menu 2</li>
<li>SELF SERVICE dropdown menu 3</li>
<li>SELF SERVICE dropdown menu 4</li>
</ul>
</li>
<li>timesheets</li>
<li>Timeoff</li>
<li class="has_dp">
<span>training</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>training dropdown menu 1</li>
<li>training dropdown menu 2</li>
<li>training dropdown menu 3</li>
<li>training dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>more</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>more dropdown menu 1</li>
<li>more dropdown menu 2</li>
<li>more dropdown menu 3</li>
<li>more dropdown menu 4</li>
</ul>
</li>
</ul>
The problem is the nature of mouseout event which is bubbled.
You need to use mouseleave instead of mouseout
$(document).ready(function() {
//main declarations
$(".thehide").hide();
//dropdown menu
$(".has_dp").click(function() {
$(".dropdown_menu", this).slideDown();
}).mouseleave(function() {
$(".dropdown_menu", this).slideUp();
});
});
/* navigation */
#topnav {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#topnav li {
float: left;
list-style: none;
}
#topnav li a {
display: block;
padding: 5px 8px;
color: red;
text-transform: uppercase;
}
#topnav li a span {
float: left;
display: block;
}
#topnav li a span:first-child {
margin-right: 3px;
}
#topnav li a span:last-child {
padding-top: 2px;
}
#topnav li a.active_menu,
#topnav li a:active,
#topnav li a:hover {
color: blue;
}
/* dropdown */
.dropdown_menu {
z-index: 999;
position: absolute;
background: #263238;
padding: 10px;
margin-top: 15px;
}
.dropdown_menu li {
clear: both;
float: none;
}
.dropdown_menu a {
clear: both;
float: none;
display: block;
padding: 5px 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav extend clear" id="topnav">
<li>Home</li>
<li class="has_dp">
<span>Company</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>Company dropdown menu 1</li>
<li>Company dropdown menu 2</li>
<li>Company dropdown menu 3</li>
<li>Company dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>HR</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>HR dropdown menu 1</li>
<li>HR dropdown menu 2</li>
<li>HR dropdown menu 3</li>
<li>HR dropdown menu 4</li>
</ul>
</li>
<li>Assets</li>
<li>Employees</li>
<li class="has_dp">
<span>expenses</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>expenses dropdown menu 1</li>
<li>expenses dropdown menu 2</li>
<li>expenses dropdown menu 3</li>
<li>expenses dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>PERFORMANCE</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>PERFORMANCE dropdown menu 1</li>
<li>PERFOMANCE dropdown menu 2</li>
<li>PERFORMANCE dropdown menu 3</li>
<li>PERFORMANCE dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>recruitment</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>RECRUITMENT dropdown menu 1</li>
<li>RECRUITMENT dropdown menu 2</li>
<li>RECRUITMENT dropdown menu 3</li>
<li>RECRUITMENT dropdown menu 4</li>
</ul>
</li>
<li>reporting</li>
<li class="has_dp">
<span>self service</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>SELF SERVICE dropdown menu 1</li>
<li>SELF SERVICE dropdown menu 2</li>
<li>SELF SERVICE dropdown menu 3</li>
<li>SELF SERVICE dropdown menu 4</li>
</ul>
</li>
<li>timesheets</li>
<li>Timeoff</li>
<li class="has_dp">
<span>training</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>training dropdown menu 1</li>
<li>training dropdown menu 2</li>
<li>training dropdown menu 3</li>
<li>training dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>more</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>more dropdown menu 1</li>
<li>more dropdown menu 2</li>
<li>more dropdown menu 3</li>
<li>more dropdown menu 4</li>
</ul>
</li>
</ul>
I have some problem with activating bootstrap dropdown menu on hover - it only works on click. Here is the Bootply version: Bootply version
Any suggestions what I'm doing wrong?
Existing Code Solution
To use your existing code, add the following line to your hover listener:
$($(this).data('target')).collapse('show');
Working fork of your bootply: http://www.bootply.com/FRv5lVuiJk
Refactored Code Solution
That being said, there is a more effecient way of doing this using tabs. See http://www.bootply.com/TjqIiOM7Hi for a working example, and the code is below.
HTML
<div class="container">
<nav class="navbar navbar-default" role="navigation" id="topmenu">
<ul class="nav navbar-nav">
<li class="dropdown active">
One
</li>
<li class="dropdown">
Two
</li>
<li class="dropdown">
Three
</li>
</ul>
</nav>
<nav class="navbar navbar-default right tab-content" role="navigation" id="submenu">
<ul class="nav navbar-nav tab-pane active" id="one">
<li>One sub 1</li>
<li>One sub 2</li>
<li>One sub 3</li>
<li>One sub 4</li>
</ul>
<ul class="nav navbar-nav tab-pane" id="two">
<li>Two sub 1</li>
<li>Two sub 2</li>
<li>Two sub 3</li>
</ul>
<ul class="nav navbar-nav tab-pane" id="three">
<li>Three sub 1</li>
<li>Three sub 2</li>
</ul>
</nav>
</div>
Javascript
$('[data-toggle=tab]').hover(function (e) {
$(this).click();
});
You can do this. No JavaScript needed
HTML:
<div class="dropdown">
<button class="">
<a class="">Dropdown</a>
</button>
<div class="dropdown-content">
<a class="dropdown-item">Item 1</a>
<a class="dropdown-item">Item 2</a>
<a class="dropdown-item">Item 3</a>
</div>
</div>
you can obviously change the style to your preference but the code relating to the display is important.
CSS:
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color:#6c757d;
}
Just slot in the menu in the position you want along with your bootstrap classes.