Custom Nav Bar

[airsoft4you]

Evening all

 

I am attempting to create a custom nav bar, now I have found a picture of something that I like however I cannot find a working version of it, so I cannot work out how I would go about creating it. the main part that I am wanting to incorporate is when you hover the white arrow shows, does anyone have any idea how to get this effect?

 

 

Kind Regards

 

Toby

[NemoPS]

I'd use an :after pseudo selector. you have to create the small arrow first (a tiny png)

 

then do something like this on the list items

 

li {

position:relative

}

 

and for the arrow

 

li.sfHover:after {

position: absolute;

content: '';

height: (height of the arrow);

width: (w of the arrow);

bottom: 0;

left: 50%;

margin-left: -(half of the width);

display:block;

background transparent url(url to your arrow image) 0 0 no-repeat

}

 

 

That's what i recently did, and it worked for me

Edited April 17, 2013 by Nemo1 (see edit history)

[airsoft4you]

I will give it a go, cheers