how can i make this menu?

can anyone help me to achieve this menu with the big arrow to hover?
thanks

If you are using CSS, have you tried using the :hover pseudoclass to apply the arrow as a background image? Something like this:

a {color: #000; text-decoration: none;}
a:hover {color: #fff; background: url("images/arrow.gif") no-repeat;}

You may also need to make the <a> a block level element. Hope this helps.

If you choose to try the background idea, you'll also need to do some tricky positioning and also need to make the hover state have a larger width. But thats only if you're wanting the arrow to "pop" out of the list and its containers, otherwise nevermind. The image is a little vague .

Originally Posted by mentalNomad If you are using CSS, have you tried using the :hover pseudoclass to apply the arrow as a background image? Something like this: a {color: #000; text-decoration: none;} a:hover {color: #fff; background: url("images/arrow.gif") no-repeat;} You may also need to make the <a> a block level element. Hope this helps.

it wouldn't be a:hover it would be #div:hover

Its more likely to be a:hover than div:hover. And #div?
The markup should be an unordered list with hyperlinks, and then choose to style how is thought best.

it would be a:hover{float:left;background:url(../images/arrow.png) no-repeat;blahblahblah}

or a:focus{}

same stuff.

dont use div:hover its not crossbrowser compatible.

use a:hover instead.

sample:
and in css:
just alter the above code if you want the background extend outside

dont use div:hover its not crossbrowser compatible.

Given it's a link, I have no idea why anyone would be using anything other than <a>.

it would be a:hover{float:left;background:url(../images/arrow.png) no-repeat;blahblahblah} or a:focus{} same stuff.

:hover = mouse pointer
:focus = keyboard

I meant same code :P~ nublet.