css transition-delay causing problems in Safari

Question

Level 1

0 points

css transition-delay causing problems in Safari

I have a WordPress site built using WooThemes Canvas theme, at http://aucklandboyschoir.org.nzwhich has a gap between the main menu items in the navigation and the submenu items.

The gap is added using a top-margin, and transition-delay to make sure that when people hover over the main menu item they don't lose the submenu when they hit the gap ...

#main-nav .sub-menu {

margin-top: 20px !important;

transition-delay: 0.1s;

-webkit-transition-delay: 0.1s;

-moz-transition-delay: 0.1s;

-o-transition-delay: 0.1s

}

This works fine, with the notable exception of in Safari. In Safari, when you hover over a menu item that has a submenu, the menu stretches and distorts. If I remove the transition-delay the menu works fine - although it doesn't look the way I want. Would really appreciate any tips on how I can fix this, or if there is an alternative method of acheiving the gap between the main menu & submenu items that would work with this theme and across all browsers ...

Thanks so much!

Meg

Posted on Mar 18, 2014 3:31 PM

Reply

Answer 1

etresoft

Level 9

56,326 points

Mar 18, 2014 5:05 PM in response to kiwimeg

Does this happen in any version of Safari or one specific version. I cannot reproduce what you are seeing in my version of Safari. Do you have any Safari extensions you can disable?

Reply

Answer 2

kiwimeg Author

Level 1

0 points

Mar 18, 2014 6:36 PM in response to etresoft

The version of Safari I have is 7.0.2

It only happens if you hover over the menu items that have submenus.

I have disabled all Safari extensions just to check ... and it still happens ...

Cheers

Meg

Reply

Answer 3

etresoft

Level 9

56,326 points

Mar 18, 2014 7:22 PM in response to kiwimeg

You don't seem to have a transition-property defined. Try this:

#main-nav .sub-menu {

transition-property: margin-top;

margin-top: 20px !important;

transition-delay: 0.1s;

-webkit-transition-delay: 0.1s;

-moz-transition-delay: 100ms;

-o-transition-delay: 100ms;

}

Reply

Answer 4

kiwimeg Author

Level 1

0 points

Mar 18, 2014 9:20 PM in response to etresoft

Thanks ... it solves the menu distortion but ... now I can't click on the submenu items because the transition delay is not making the 'gap' clickable so I have time to get the cursor on to my submenu list ... 😟

Reply

Answer 5

kiwimeg Author

Level 1

0 points

Mar 18, 2014 10:34 PM in response to kiwimeg

I think I might have cracked it with

#navigation ul.nav > li:after {

content: "";

display: block;

height: 20px;

width: 100%;

background: #transparent;}

I just need to make the background white on hover ... but not sure of the syntax when combining pseudo-classes & elements ...

Reply

Answer 6

etresoft

Level 9

56,326 points

Mar 19, 2014 5:46 AM in response to kiwimeg

I wouldn't use transitions to affect behaviour. You can just change your submenu to be a transparent and then draw the submenu in a contained div. That is the only way to prevent a mouse exit event.

Reply

Answer 7

kiwimeg Author

Level 1

0 points

Mar 19, 2014 3:05 PM in response to kiwimeg

In the end I used CSS to add the gap in the menu ... without using transitions ... the full CSS I used was:

#navigation ul.nav > li:after {

content: "";

display: block;

height: 20px;

width: 100%;

background: #transparent;}

#navigation ul.nav > li:hover:after {

background: #ffffff;

}

Thanks for your help @etresoft 🙂

Reply