Gray line underneath horizontal list items

I have the following CSS.

.toplink
{
	color: #e1fdfe;
	font: bold 13px/70px Tahoma, Verdana, Arial;
	list-style-type: none;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 120px;
}
.toplink li
{
	color: #e1fdfe;
	font: bold 13px/70px Tahoma, Verdana, Arial;
	display: inline;
}

Code (markup):

... and the following HTML.

<ul class="toplink">
	<li><a href="index.htm">Home</a></li> | 
	<li><a href="contact.htm">Contact</a></li> | 
	<li><a href="Feedback.htm">Feedback</a></li>
</ul>

Code (markup):

For some reason this creates a weird gray line underneath list items. How can I get rid of that?

(FYI, http://www.cre8iveonline.com/nmo/index.htm is using this CSS and html. At the top left corner, you see

Home | Contact | Feedback

and if you look closely, you find the gray line.)

 

Change it to this:

This is your culprit: