Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Combine hover intent with Long Drop Down solution from CSStricks WordPress


This is a jQuery question for a WordPress site.
I managed to activate the hoverintent for the navigation, but I have a problem for a very long drop-down which is customized using this: [[LINK href=""]][[/LINK]]

This is the link to the website and the Second menu Vehicle Category does not gets inherit the hoverintent: [[LINK href=""]][[/LINK]]

I am sure that it is a problem on how the jQuery code is organized:

I really hope a jQuery expert can help out me here:

//jQuery solution for VERY long drop down menus
var maxHeight = 406;


jQuery("#main_catnav li.catvehmake").hover(function() {

var jQuerycontainer = jQuery(this),
jQuerylist = jQuerycontainer.find("ul"),
jQueryanchor = jQuerycontainer.find("a"),
height = jQuerylist.height() * 1.1, // make sure there is enough room at the bottom
multiplier = height / maxHeight; // needs to move faster if list is taller

// need to save height here so it can revert on mouseout"origHeight", jQuerycontainer.height());

// so it can retain it's rollover color all the while the dropdown is open
//jQuery('ul#main_catnav li.catvehmake').addClass("hover");

// make sure dropdown appears directly below parent list item
marginTop: "42px"
// hides the dropdown beneath the parent
jQuery('ul#main_catnav').css({overflow: "hidden"});

// don't do any animation if list shorter than max
if (multiplier > 1) {
height: maxHeight
.mousemove(function(e) {
var offset = jQuerycontainer.offset();
var relativeY = ((e.pageY - * multiplier) - ("origHeight") * multiplier);
if (relativeY >"origHeight")) {
jQuerylist.css("top", -relativeY +"origHeight"));

}, function() {

var jQueryel = jQuery(this);

// put things back to normal
.css({ top: 0 })
jQuery('ul#main_catnav').css({overflow: "visible"});


// Add down arrow only to menu items with submenus
jQuery("#main_catnav ul > li:has('ul')").each(function() {
jQuery(this).find("a:first").append("<span class='has_ul'>&nbsp;&nbsp;&nbsp;&gt;</span>");


//add hover intent to dropdown
var config = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: doOpen, // function = onMouseOver callback (REQUIRED)
timeout: 800, // number = milliseconds delay before onMouseOut
out: doClose // function = onMouseOut callback (REQUIRED)

function doOpen() {
function doClose() {
jQuery("ul#main_catnav li, ul#main_catnav li ul li:has(ul)").hoverIntent(config);


Answers (0)

No answers yet.