CODEWITHSUNDEEP
cssflicker
user2994241
user2994241

Reputation: 19

CSS menu flicker with all browsers

I'm getting a flicker in the first 3 of 9 main navigation items in my CSS menus (there are no submenus), which occurs in IE, Safari, Firefox and Chrome, but ONLY on the home page.

Specifically, the first menu item "About" flickers the most, while "Admissions" and "Academics" both flicker, but not as overtly.

My thoughts are that something is conflicting with the menus on the home page, specifically something unique to the home page, such as the Google search I've embedded in the upper navigation (and tried to style as unobtrusively as possible), or the jQuery slideshow.

I've tried several solutions suggested here for flickering in webkit, but none have solved the problem.

Upvotes: 0

Views: 386

Answers (1)

WheretheresaWill
WheretheresaWill

Reputation: 6490

It looks like it's caused by your dropdown curtains being too wide. So hovering on the nav item shows them, which then immediately causes the mouse is positioned over them and not the nav item... causing them to be hidden again. Hence the flickering (I think!).

This doesn't happen on the nav items to the right because they're short enough so they don't cover the nav links when 'hidden'.

See image below of the width.

Changing the css to have a larger top value of -800px like the following may help:

.dropdownContain {
  width: 160px;
  position: absolute;
  z-index: 2;
  left: 50%;
  margin-left: -80px; /* half of width */
  top: -800px;
}

enter image description here

Upvotes: 1

Related Questions