0

so I'm creating a menu, and I'm almost done with submenu, but I have one problem, it blinks when I move my mouse over the blue border, you can see demo here - http://jsfiddle.net/367ms/8/ . Can you help me fixing it?

user1184908
  • 45
  • 3
  • 8
  • I remember your other post today... why do you not just jQuery dropdown function instead. Such a nice CSS navigation bar you have created, why not add some nice JavaScript with it too? – TheBlackBenzKid Feb 08 '12 at 16:34
  • Could you give me some example please? – user1184908 Feb 08 '12 at 16:42
  • I dont want to sound rude but Google (jquery simple drop down menu) = http://javascript-array.com/scripts/jquery_simple_drop_down_menu/ and also 38 more ways http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/ – TheBlackBenzKid Feb 08 '12 at 16:52

1 Answers1

1

There's a height property for li that's 60px and one for li:hover that's 40px. Upon hovering, you can see the 20px gap which is causing the flickering. I believe it's alternating between the two rules very rapidly. To fix, either remove the height property on the li:hover or set it to 60px.

shaunsantacruz
  • 8,903
  • 3
  • 19
  • 19
  • yeah, but then the blue border is not between the submenu and the li elements. – user1184908 Feb 08 '12 at 17:18
  • Put the border on a different element. I wrapped the tagline in a span and applied the border to that upon hover. http://jsfiddle.net/alpacalips/367ms/12/ – shaunsantacruz Feb 08 '12 at 18:23
  • Wow, okay, It's almost done, now the only problem is that I'm using cufon and on chrome if, I set up cufon, the submenu's a tag take's parent li tag settings, all settings except color, not sure from where it get's color. How can I edit that? – user1184908 Feb 08 '12 at 18:34
  • and it ok again, if I hover it. Then it work as it should work. – user1184908 Feb 08 '12 at 18:37
  • I was having problems with cufon in a wordpress template and eventually edited the jquery to not use cufon on header tags h1 h2 etc See http://stackoverflow.com/questions/2738303/how-to-disable-cufon-on-certain-elements. I prefer not using cufon all together its just one less js file loading on the page. The flickering is always tricky playing with margins, paddings and making sure you have even pixels on hover effects is always a little tricky. – Anagio Feb 08 '12 at 22:03