CODEWITHSUNDEEP
jquerycssmenu
nharding99
nharding99

Reputation: 11

jQuery flickering on dropdown menus on hover

I have a site in development, the dropdown menus flicker (most of the time) when you hover over them.

Website is here: http://www.wya.hardingweb.net

The CSS for the submenus is like this:

#nav ul {
  position: absolute;
  left: 0;
  display: none;
  margin: 0 0 0 -1px;
  margin-top: 5px;
  padding: 0;
  list-style: none;
  background-color: rgba(221, 221, 221, 0.7);
  border: 1px solid #cccccc;
}

#nav ul li {
  width: 150px;
  float: left;
  border-top: 1px solid white;
}

#nav ul li.long {
  height: 50px;
}

#nav ul a {
  font-family: helvetica;
  font-size: 15px;
  display: block;
  line-height: 18px;
  padding: 6px 0px;
  color: #252060;
}

#nav ul a:hover {
  text-decoration: underline;
}

This is triggered by the following jQuery (extract):

$(document).ready(function() {

//Menu system
$('#nav li').hover(function() {
    //show its submenu
    $('ul', this).slideDown(100);

}, function() {
    //hide its submenu
    $('ul', this).slideUp(100);
});

});

I have a slideshow running as well, if I disable the jQuery for the slideshow then the menu flicker problem is still repeatable.

I'm using Firefox 11 & Chrome to test initially.

Does anyone have any ideas?

Thanks Nigel H

Upvotes: 1

Views: 6424

Answers (3)

kayen
kayen

Reputation: 4868

Try this:

CSS

#nav ul {
    margin-top: 0;
}

JS

//Menu system
$('#nav > li').hover(function() {
    //show its submenu
    $('ul', this).slideDown(100);
}, function() {
    //hide its submenu
    $('ul', this).slideUp(100);
});

Upvotes: 2

Daniel
Daniel

Reputation: 126

The reason to your flickering, is that there is a 5px gap in the main list-items to the dropdownmenu.

If you remove the margin-top: 5px; on the #nav ul, then it should work correctly.

This however leaves the dropdown menu 0px appart from the list-item. So i suggest removing the padding-bottom on the ul#nav and adding it to the ul#nav li.

After these corrections, you should get the code:

#nav {
  display: inline;
  float: left;
  margin-right: 10px;
  width: 950px;
  margin: 0;
  margin-top: 50px;
  margin-left: 100px;
  padding: 0;
  list-style: none;
}

#nav li {
  font-size: 28px;
  font-family: code-bold, helvetica, sans-serif;
  letter-spacing: -1px;
  padding-left: 20px;
  padding-right: 20px;
  color: #d1181e;
  float: left;
  display: block;
  position: relative;
  z-index: 500;
  margin: 0 1px;
  padding-bottom: 5px;
}

#nav ul {
  position: absolute;
  left: 0;
  display: none;
  margin: 0 0 0 -1px;
  padding: 0;
  list-style: none;
  background-color: rgba(221, 221, 221, 0.7);
  border: 1px solid #cccccc;
}

Upvotes: 3

Th0rndike
Th0rndike

Reputation: 3436

try filtering the visible and hidden ul: 

$('#nav li').hover(function() {
//show its submenu
$('ul:hidden', this).slideDown(100);

}, function() {
//hide its submenu
$('ul:visible', this).slideUp(100);
});

});

Upvotes: 0

Related Questions