Image Background center top of UL LI Menu

[persianlity]

Hi,
I edited This menu For Horizontal menu and show image background top center of `LI`. But this not worked . Can Help me any one . Thanks
HTML :

Home


New


Revised


Tools


CSS


Forums

CSS :

ul.arrowunderline{

list-style-type:none;

margin:0;

padding:10px;

text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */

font: bold 16px Georgia;

}



ul.arrowunderline li{

display:inline;

margin-right:25px; /* spacing between each menu item */

}



ul.arrowunderline li a{

position:relative;

color:black;

padding-bottom:8px; /*spacing between each menu item and arrow underline beneath it */

text-decoration:none;



}



ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */

content:'';

position:absolute;

left:50%;

margin-left:-75px;

width:150px;

height:30px;

background:url(http://i.stack.imgur.com/TsPUi.png) center top no-repeat;

}

Online Demo : http://jsfiddle.net/vr7dG/3/ ( In fact, if we want to display this image on the top menu Upside down )

Maybe this way I work. Is there a better way? another way!

Thanks

[persianlity]

Yes karlpcrowley , This is My Mean. Thanks. 1 problem: this not worked in IE6/7

[persianlity]

u right! IE8+ worked. sorry but i have a big probelm: how to selected li for selected css ?! e.x:

Revised

Default is selected.

Thanks.

[persianlity]

i know ! this worked without after and your e.x 2 (http://jsfiddle.net/vr7dG/6/) . my problems with e.x 1 using after (http://jsfiddle.net/vr7dG/4/ .)

Thanks

[persianlity]

Any One Help Me :(

[persianlity]

wow! Nice . Thanks Men. This Useful I Like This :X

[persianlity]

I have new problem. I add ddajaxtabs to my page. no i see my tab menu is selected with arrows of underline. problems is here :

if remove id of ul this not show arrow ! so i need to this id for js function.
see new demo : http://jsfiddle.net/vr7dG/12/
Any Help,Thanks

[Author]

Posts