Question

I’m new to jQuery and learning jQuery concepts. Currently, I’m trying to design a custom drop down menu which has long list items. I wanted to scroll the menus while mouse over to the main menu. I’m trying to customize the CSS with the jquery scroll menu which described here with a new look and feel.

I have tried the script, but i found some issues in it. You can check it in jsfiddle here . While initial mouseover to the first list item, the drop down list items are not displaying at all (In an initial page load.) Secondly, the width of the second level UL item is getting hidden.

Can anyone please check the fiddle and correct it? Also, please let me know, where I did wrong, so that I will try to correct myself in the future.

Thanks in advance. 🙂

Answer 1

Check this out maybe helpful

ul.dropdown li:last-child a
{
  border-right: none;
} /* Doesn't work in IE */
ul.dropdown li.hover, ul.dropdown li:hover
{
  background: #F3D673;
  color: black;
  position: relative;
  z-index:1;
}
ul.dropdown li a:hover{background: #F3D673;}

JQuery:

.mousemove(function(e) {
                var offset = $container.offset();
                var relativeY = ((e.pageY - offset.top) * multiplier) -   ($container.data("origHeight") * multiplier)+50;
                if (relativeY > $container.data("origHeight")) {
                    $list.css("top", -relativeY);
                    $list.css("zIndex", "-1"); //add this line 
                };
            });

DEMO