CSS3 - Almost a good idea but for Safari and Chrome of all browsers.

31st January 2010

Updated 24th February 2011 - Now working in Safari and Chrome





copyright © stu nicholls - CSS play

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 add a link back to CSSplay and retain any copyright comment in the stylesheet.
    A donation to the 'Support CSSplay' fund would be appreciated.
  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 in this case a donation to the 'Support CSSplay' fund 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.

Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.


Free, practical CSS menus, layouts, and examples

Follow CSS play


Facebook   Twitter   Facebook Fan Page