I need to create a 3 second delay for the following class: .mag-megamenu .dropdown.mag-megamenu-fw .dropdown-menu
I would like to use the solution found here for a similar question: https://stackoverflow.com/a/6943704/3684265
However I'm having an issue finding the correct hover class to apply the visibility and opacity styles to. I have applied visibility, opacity and transition to .mag-megamenu .dropdown.mag-megamenu-fw which works to hide it the drop down, but when I hover over the main navigation items the dropdown doesn't appear.
Full stylesheet is below for reference:
//
// Common
// _____________________________________________
& when (@media-common = true) {
.mag-megamenu .dropdown a, .mag-megamenu .dropdown-menu a {
color: #656565;
}
.mag-megamenu .dropdown-menu > li > a {
padding: 6px 15px;
}
.mag-megamenu .navbar-nav > li .dropdown-menu {
border: 1px solid #d1d1d1;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.19);
}
.mag-megamenu i {
color: #bfbfbf;
}
.mag-megamenu .dropdown:hover > .dropdown-menu {
margin-top: 0;
}
.mag-megamenu .dropdown-menu {
border: 1px solid #efefef;
box-shadow: none;
padding: 0;
}
.mag-megamenu .form-control {
border: 1px solid #efefef;
margin-top: 10px;
}
.mag-megamenu .btn {
margin: 10px 0 20px;
}
.mag-megamenu video {
height: auto;
max-width: 100%;
}
.mag-megamenu iframe, .mag-megamenu embed, .mag-megamenu object {
max-width: 100%;
}
.mag-megamenu .dropdown-menu .withoutdesc {
display: block;
margin-top: 0;
padding: 15px 20px;
text-align: left;
text-transform: none;
width: 100%;
}
.mag-megamenu a:hover {
text-decoration: none;
}
.mag-megamenu .dropdown-menu .withoutdesc ul li {
padding: 3px 10px;
}
.mag-megamenu .dropdown-menu .withoutdesc ul li:hover, .mag-megamenu .dropdown-menu .withoutdesc ul li:focus {
background-color: #f5f5f5 !important;
color: #262626;
text-decoration: none;
}
.mag-megamenu .dropdown-menu .withoutdesc li:last-child {
border-bottom: 0 solid #fff;
}
.mag-megamenu .mag-megamenu-content.withdesc a::after {
color: #cfcfcf;
content: attr(data-description);
display: block;
font-size: 11px;
font-weight: 400;
line-height: 0;
text-transform: uppercase;
}
.mag-megamenu .dropdown-submenu {
position: relative;
}
.mag-megamenu .dropdown-submenu > .dropdown-menu {
left: 100%;
margin-left: -1px;
margin-top: 0;
top: 0;
transition-delay: 2s;
}
.mag-megamenu .dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.mag-megamenu .dropdown-submenu > a::after {
border-color: transparent transparent transparent #cccccc;
border-style: solid;
border-width: 5px 0 5px 5px;
display: block;
float: right;
height: 0;
margin-right: -10px;
margin-top: 5px;
width: 0;
}
.mag-megamenu .dropdown-submenu:hover > a::after {
border-left-color: #ffffff;
}
.mag-megamenu .dropdown-submenu.pull-left {
float: none;
}
.mag-megamenu .dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
}
.mag-megamenu p {
color: #656565;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
}
.mag-megamenu .nav, .mag-megamenu .collapse, .mag-megamenu .dropup, .mag-megamenu .dropdown {
position: static;
}
.mag-megamenu .half {
left: auto !important;
right: auto !important;
width: 50%;
}
.mag-megamenu .container {
position: relative;
}
.mag-megamenu .dropdown-menu {
left: auto;
}
.mag-megamenu .nav.navbar-right .dropdown-menu {
left: auto;
right: 0;
}
.mag-megamenu .mag-megamenu-content {
padding: 15px 25px;
}
.mag-megamenu .dropdown.mag-megamenu-fw .dropdown-menu {
left: 0 !important;
right: 0;
overflow: auto;
max-height: 500px;
position: absolute;
background-color: #fff;
z-index: 9999;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 3s linear;
}
.mag-megamenu .dropdown.mag-megamenu-fw {
position: initial !important;
}
.mag-megamenu .title {
border-bottom: 1px solid #efefef;
font-size: 13px;
font-weight: bold;
margin-top: 15px;
padding-bottom: 10px;
text-transform: uppercase;
}
.mag-megamenu ul {
list-style: outside none none;
padding-left: 0;
}
.mag-megamenu ul > li {
margin-bottom:0px;
}
.mag-megamenu .navbar-nav > li .dropdown-menu {
display: none;
}
ul.dropdown-menu.fullwidth li.mag-megamenu-content ul {
display: block !important;
}
ul.dropdown-menu.fullwidth li.mag-megamenu-content ul li{
font-weight: 400;
padding-bottom: 10px;
}
.label {
padding: 3px 10px;
font-size: 1.2rem;
font-weight: 300;
border-radius: 2px;
&-info {
border: 1px solid #d9534f;
color: #ffffff;
background-color: #d9534f;
}
&-danger {
border: 1px solid #ffbb20;
color: #ffffff;
background-color: #ffbb20;
}
&-success {
border: 1px solid #5cb85c;
color: #ffffff;
background-color: #5cb85c;
}
}
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
.mag-megamenu .mag-megamenu-content {
padding: 0px;
}
ul.dropdown-menu.fullwidth li.ui-menu-item.all-category {
display: none !important;
}
}
