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

[Jody Cleveland]

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