wedeAttercurf
New Member
I am working on a custom menu in jQuery and learning as I go. I was doing fine so far for the most part until I started the dropdown menu. A div in my dropdown overlaps my link and the link become unclickable. You will see what you mean when you test out the code. Any help is appreciated.Here is a link to jsFiddleHere is my CSS:li { background-color: #ccc; position: relative; color: #fff; z-index: -2; float: left;}div.menu-item { background-color: #000; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; z-index: -1;}a.menu-text { display: block; color: #fff; margin: 0; padding: 10px; padding-bottom: 15px;}div.dropdown { display: none; position: absolute;}div.dropdown-item { position: relative; background-color: #1E4b55;}div.dropdown-item a { padding: 10px; padding-left: 15px; display: block; white-space: nowrap; color: #fff;}div.dropdown-left { height: 100%; width: 10px; background-color: #000; position: absolute; top: 0; left: 0;}Here is my HTML<div> <ul> <li> <div class="menu-item"></div> <a class="menu-text" href="http://stackoverflow.com/questions/14458409/#">text</a> <div class="dropdown"> <div class="dropdown-item"><div class="dropdown-left"></div><a href="http://stackoverflow.com/questions/14458409/#">item 1</a> </div> <div class="dropdown-item"><a href="http://stackoverflow.com/questions/14458409/#">item 2</a> </div> <div class="dropdown-item"><a href="http://stackoverflow.com/questions/14458409/#">item 3</a> </div> </div> </li> <li> <div class="menu-item"></div> <a class="menu-text" href="http://stackoverflow.com/questions/14458409/#">texttexttext</a> </li> <li> <div class="menu-item"></div> <a class="menu-text" href="http://stackoverflow.com/questions/14458409/#">tetexttexttexttexttexttexttextxt</a> </li> </ul></div>And here is my javascript:$(function () { $("li").hover( function () { $(this).find('div.menu-item').stop().animate({ height: '100%' }, { duration: 700, specialEasing: { height: 'easeOutQuint' } }); $(this).find('div.dropdown').slideDown(); }, function () { $(this).find('div.menu-item').stop().animate({ height: '10px' }, 700); $(this).find('div.dropdown').stop().slideUp(); }); $("div.dropdown-item").hover( function(){ $(this).find('div.dropdown-left').stop().animate({ width: '100%' }, { duration: 700, specialEasing: { width: 'easeOutQuint' } }); }, function(){ $(this).find('div.dropdown-left').stop().animate({ width: '10px' }, 500); } );});