Re: [support] How to have current menu item highlighted when it's an image?

Hello Stefan,

You now have something like this: #item1 { background: transparent url('yourimage.png') no-repeat 0px 0px; } #item1:hover { background-position: 0px -50px; /* guess your image has a height of 50px */ }

Place an element which contains the second image within the list item:

<ul id="nav"> <li id="item1">&nbsp;<span class="info">&nbsp;</span></li> <li id="item2">&nbsp;<span class="info">&nbsp;</span></li> </ul>

Then you have to hide the element by default: li .info { display: none; width: ...; height: ...; background: transparent url('yoursecondimage.png') no-repeat 0px 0px; }

and display it on hover: #item1:hover .info { display: block; /* here is the ugly trick: */ position: absolute; top: 0px; /* adjust as needed */ left: 0px; /* adjust as needed */ }

I haven't tested it yet but it should work.

Well, I've mostly gotten it now. There's one issue though. It has to do with this part here: #item1:hover .info { display: block; /* here is the ugly trick: */ position: absolute; top: 0px; /* adjust as needed */ left: 0px; /* adjust as needed */ }

The content for the page is contained in a div, <div class="page-container-2">. What I'd like is for #item1:hover .info to be so many pixels from the left hand side of page-container-2. Not from the left hand side of the page.

Is this possible?

Thank you so much for helping me out with this. I really appreciate it!

- jody