Adjacent Combinator Menu Effect

This is an examples of the indirect adjacent and direct adjacent selector along with the hover selector. The results should be that when you hover your mouse over a link in the menu bar the open end of all the link dividers will face the current link.
example of the effect.

HTML Code

<ul> <li class="end"><img src="leftendall.png" alt="end" /></li> <li><a href="../../">launch</a></li> <li><a href="../">css play</a></li> <li><a href="../../about/">about</a></li> <li class="end"><img src="rightendall.png" alt="end" /></li> </ul>


Indirect '~'

CSS Indirect Code

body #indirect ul li:hover ~ li { background-image : url(rightend.png); }


Direct '+'

CSS Direct Code

body #direct ul li:hover + li, body #direct ul li:hover + li + li{ background-image : url(rightend.png); }


Problems

No browser works with the indirect method as of March 14, 2003. Mozilla 1.3 sort of works with the direct mehtod.


Return to CSS Play.

© 2003 Seamus P. H. Leahy
You may take and improve upon this.