menu active link help

I have a horizontal menu.

I want to set an image when it is active. But i want the image to be higher above

Code:

---

------------------------------
    \  /                               
      \/
    Home Link1 Link2 Link3

---

I basically have an arrow image that i want to place above the active menu item. Not exactly sure how i can go about this though.

Thanks.

Well, the first thing I would do is use an unordered list to mark up the menu, then apply an ID of "menu" to the list itself.

Instead of using images for the list items, I'd use plain text, and then combine them with an image substitution technique such as the one Paul O'B uses here:

http://www.pmob.co.uk/temp/navimagereplace.htm (Note - I'd use the SPAN instead of EM, since it's not only semantically appropriate, but also because Mac-IE is a dead browser that no longer needs to nor should be supported.)

Now, by active, do you mean when the person is hovering over the menu item (or has it "active" via the keyboard), or do you mean for the current page that the person is viewing? Both have slightly different implementations, which is why I'm asking.

this is what i got.

<ul id="headermenulist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>

and yes active would be they are on the home page and the arrow shows that.

as far as css i have

#headermenulist li{
display: inline;
list-style-type: none;
padding-right: 40px;
}

so its a horizontal list.
When they are on say the home page the id would be active like shown above.

But i dont know how to get just that to have an image above the text.

As of right now i have a header area like

Code:

---

|-------------------------------------|
|-------------------------------------|
|                                    |
|-------------------------------------|

---

i want to do something like this.

Code:

---

|-------------------------------------|
|-----\/------------------------------|
|                                    |
|    Home Link1 Link2 Link3          |
|                                    |
|-------------------------------------|

---

Where the text is going to be vertically centered. But the image will be way at the top there.

any ideas out there? thanks.

bumping

I haven't forgotten, just got sidelined by work is all (typing this from the library on my way home from dinner).

no problem, im working on some other stuff too but i cant seem to figure out how to do this menu thing or find anything on it. no rush.