Re: How to remove the arrow mark that appears in css horizontal menu??

[goddy]

HTML CODE:

• Read
• Speaking
• Writing
• Grammar
• Vocabulary

CSS CODE:

#menu{
width:675px;
list-style:none;
margin:0;
padding-top:21px;
margin:0 auto;
}

#menu li{
float:left;
margin:0;

}

#menu li a{
display:block;
text-indent: -9999px;
overflow: hidden;
height:44px;

}

#menu li#read a{
background: url(images/read.png) no-repeat;
width:116px;

}

#menu li#speaking a{
background: url(images/speaking.png) no-repeat;
width:116px;

}

#menu li#writing a{
background: url(images/writing.png) no-repeat;
width:116px;

}

#menu li#grammar a{
background: url(images/grammar.png) no-repeat;
width:116px;

}

#menu li#vocab a{
background: url(images/vocab.png) no-repeat;
width:116px;

}

#menu li#read a:hover{
background: url(images/read_ro.png) no-repeat;
}
#menu li#speaking a:hover{
background: url(images/speaking_ro.png) no-repeat;
}
#menu li#writing a:hover{
background: url(images/writing_ro.png) no-repeat;
}
#menu li#grammar a:hover{
background: url(images/grammar_ro.png) no-repeat;
}
#menu li#vocab a:hover{
background: url(images/vocab_ro.png) no-repeat;
}
.clear{
clear:both;
}

#menu li#read a.current{
background: url(images/read_ro.png) no-repeat;
cursor:default;
}

#menu li#speaking a.current{
background: url(images/speaking_ro.png) no-repeat;
cursor:default;
}
#menu li#writing a.current{
background: url(images/writing_ro.png) no-repeat;
cursor:default;
}

#menu li#grammar a.current{
background: url(images/grammar_ro.png) no-repeat;
cursor:default;
}
#menu li#vocab a.current{
background: url(images/vocab_ro.png) no-repeat;
cursor:default;
}