Este es mi código para un menú desplegable. Saqué el código de un tutorial que produjo esto:http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html

Pero en lugar de la navegación de texto, tengo imágenes como se pueden ver en el CSS adjunto a los identificadores de span. Con este código, me dan los menús desplegables para cada tramo correctamente, simplemente no puedo deshacerme del espacio en blanco entre ellos.

Sé que una nueva línea en HTML entre divs / spans crea espacios en blanco, pero quiero saber cómo deshacerme de ellos en CSS.

<div id="menu">
<ul class="tabs">
<li class="hasmore"><a href="#"><span id="bird"></span></a>
    <ul class="dropdown">
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
        <li class="last"><a href="#">Menu item 6</a></li>
    </ul></li><li class="hasmore"><a href="#"><span id="wild"></span></a>
    <ul class="dropdown">
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
        <li class="last"><a href="#">Menu item 6</a></li>
    </ul>
</li>

</ul>
</div>

Esto es algo de CSS que se aplica:

#menu ul
{
margin: 0 auto;
}

ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}

ul.tabs li
{
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
float: left;
position: relative;
}

ul.tabs a
{
position: relative;
display: block;
}

#bird {
background-image:url(images/birdingnav.png);
width:80px;
height: 20px;
text-indent:-9009px;
font-size: 0px;
border: 0;
}

#wild {
background-image:url(images/wildernessnav.png);
width:119px;
height: 20px;
text-indent:-9009px;
font-size:0px;
border: 0;
}

¿Qué debo hacer con este código en CSS para deshacerme del espacio en blanco que aparece entre mis imágenes de tramo?