Add arrows to the CSS menu

1. CSS

View code

 . Tabset {position: relative; overflow: hidden; padding: 2px  0   0  ;}. Tabset. B {width:  100 % ; Overflow: hidden; Height: 1px; font -Size: 0  ; Line -Height: 0  ; Background: url(sep1.png) Repeat -X ;}. tabset ul {display: block; overflow: hidden; padding:  0  ; List - Style: none; margin:  0  ;}. Tabset ul Li {  Float  : Left; margin:  0  22px; padding:  0   0 17px 0  ; Font: bold 21px /23px Arial, Helvetica, sans-Serif; letter -Spacing :- 1px; color: # f27021; position: relative; text -Shadow: 0   0 3px # 000000  ;}. Tabset ul Li. Disable {color: # define f73;}. tabset ul Li em {position: absolute; left:  40 % ; Bottom:  0  ; Font -Size: 0  ; Line -Height: 0 ; Width: 14px; Height: 11px;}. tabset ul Li. Active {color: # FFF;}. tabset ul Li. Active em {Background: url(bul1.png) No -Repeat ;}

2. html

<Div Class = "  Tabset  " > <Ul> <li Class = '' > Archives <em> & nbsp; </em> </LI> <li Class = '  Active ' > File <em> & nbsp; </em> </LI> <li Class = '' > Information <em> & nbsp; </em> </LI> <li Class = '' > Market <em> & nbsp; </em> </LI> <li Class = '' > Others <em> & nbsp; </em> </LI> </ul> <Div Class = " B  " > & Nbsp; </div>

3. effect renew