Menu item sub indicator css animation

[jgk]

Hi!

I've made an animated css arrow in the sub-indicator css class on the main menu of the metro theme to indicate that the menu item has sub items. The triangle goes to full opacity and points down on hover:

http://bit.ly/12RVOW4

I like it so far (only tested on chrome for mac thus far) but when the mouse goes down to a sub menu item, the triangle turns back up...

I would like the triangle to stay pointed down when you are hovering over the menu items' sub items. Thanks for any help!

I haven't been able to figure this out or find any documentation on genesis themes's built-in sub indicators.

Thanks so much!

[cehwitham]

I can't see the triangle pointers on your website so it's hard to say how you might change the styling to achieve what you're aiming for. Have you removed the arrow?

---

Twitter: cehwitham Web: cehwitham.com

[jgk]

Hi Chris,

Thanks for looking at it!

No, I haven't removed the arrow. It's working for me in chrome for mac, safari, safari for iphone and firefox for mac. (Although iphone css needs a little tweak.)

Here is what I'm seeing in firefox.

http://bit.ly/YxHT1D

I know the css3 animation won't work in older browsers but I'm surprised the arrow isn't showing up at all.

What browser and os are you using? Thanks again for checking it out.

Jay

 

[cehwitham]

Ah I can see the arrow now, I'm using Chrome on Mac.

The border / box shadow that appears on hover remains when you hover over the dropdown so I suggest you apply the arrow effect to the same selector as that. I think it is a li:hover rather than the a:hover because the li contains the sub menu and therefore remain in a hover state when the sub menu is hovered.

.genesis-nav-menu li a:hover, .genesis-nav-menu li:hover a {
text-decoration: none;
color: rgb(34, 34, 34);
background-position: 0px -33px;
box-shadow: 0px -5px rgb(51, 51, 51) inset;
}

I hope this helps.

---

Twitter: cehwitham Web: cehwitham.com

[jgk]

Thanks so much! That fixed it.

[Author]

Posts