Is there a way to create a delay for the bootstrap dropdown feature while ensuring that it still appears on hover?
If you want to test this, click here: http://www.bootply.com/YcVBzvXqrR
This is the HTML code I'm using:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="category-box">
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-bullhorn fa-3x"></i>
<h5>CATEGORY 1</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
<a href="#">Action 1</a>
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div class="services-shortcut">
<i class="fa fa-car fa-3x"></i>
<h5>CATEGORY 2</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
<a href="#">Action 2</a>
</div>
</div>
<!-- More content goes here -->
</div>
</div>
</div>
</div>
Here's my CSS styling as well:
.dropdown:hover .dropdown-menu {
display: block;
}
.category-overlay{
width:1190px;
height:90px;
background:#ddd;
margin-top:30px;
}
I'd appreciate any tips on how to implement a slight delay before the dropdown menu appears.