CSSPLAY

CSS MENUS › General sibling hover webkit support

Date : 31st January 2010

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

• HOME
• DEMOS
• MENUS
• LAYOUTS
• BOXES
• OPACITY

Information

I am posting this menu to see if anyone has seen this problem or knows of a workaround.

The idea is to have a current page indication that will be removed when hovering other menu links.

For this to work I have set up the current page indication as the last list item in the unordered list and placed it using absolute positioning behind the current page link.

Then using the 'general sibling selecter' ~ (tilde) I can move this to its new position when hovering over other menu links using the style:
.menu li.p3:hover ~ li.slide {left:220px;} etc

Well that was the theory and it works in Firefox, Opera and even IE8. BUT not in Safari or Google Chrome which doesn't appear to allow you to use :hover with ~

If anyone has a workaround or any information on this then please let me know.

24th February 2011

There is now a workaround to this problem in Safari and Chrome by adding a CSS webkit animation to the html that does nothing but 'activates' the :hover tilde styling.

I have also added slide animation for Safari, Chrome, Opera and Firefox v4 beta

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.