It seems like a common issue, but none of the solutions I've come across so far have helped. Everything appears to be standard and simple code, yet I can't seem to get it to work properly. I'm trying to create a dropdown menu where a hidden ul element appears slowly when hovered over.
Here is the HTML code:
<div class="main-nav">
<ul>
<li>
<a href="wtvr">Title</a>
<ul class="dropedmainnav t50 ">
<li class="subnavli" style="position:relative;">
<div class="superimage" style="position:absolute; right:-100%;">
<img src="" alt="{{link.handle}}">
</div>
</li>
<li class="t50 subnavli">
<a href="wtvr">Subnav link</a>
</li>
<div class="subnavsides"></div>
</ul>
</li>
</ul>
</div>
And here is the JavaScript code:
$(".main-nav ul li").each(function(){
$(this).mouseover(function(){$(this).find("ul").addClass("dropedunderul");});
$(this).mouseleave(function(){$(this).find("ul").removeClass("dropedunderul"); });
$(this).find("ul").mouseover(function(){$(this).addClass("dropedunderul");});
$(this).find("ul").mouseleave(function(){$(this).removeClass("dropedunderul");});
And the CSS code:
.t50 {-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.dropedmainnav {display:none; padding:15px 0 10px 0; overflow:hidden;width:500px; }
.dropedunderul {display:table !important; min-height:150px; border-top:2px solid transparent; z-index:2; }
.main-nav ul li {position:relative;}
.main-nav ul li ul {position:absolute;background-color:rgba(255,255,255,0); overflow:visible;}
.main-nav ul li ul li {float:none !important; text-align:left !important;}
I believe these are all the relevant styles. I have also attempted to add transitions specifically to .dropedmainnav and .dropedunderul, as well as using inline styles.