Need help getting rid of pesky selection line

It's the first time I'm using <li> for a side bar.

As you can see in the code below.
However since I'm using padding / margins etc I'm getting this annoying selection box which also covers the margins used.



Is there anyway to cure this? Or get rid of the selection line?

Any help is appreciated.

<div id="sidebar">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">About Us</a></li>
    <li><a href="index.html">Services</a></li>
    <li><a href="index.html">Contact Us</a></li>
  </ul>
</div>

Code (markup):

#sidebar ul {
	font-family: verdana, arial, sanf-serif;
	font-size: 12px;
	color: #FFFFFF;
	margin: 0;
	padding: 0px 0px 0px 17px;
	list-style-type: none;

#sidebar a {
	display: block;
	width: 178px;
	height: 32px;
	padding: 7px 0px 0px 15px;
	background: url(images/navigation1.gif) no-repeat;
	text-decoration: none;
}

Code (markup):