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 '~'

launch
css play
about

CSS Indirect Code

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

Direct '+'

launch
css play
about

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.