Este é o meu código para um menu suspenso. Eu peguei o código de um tutorial que produziu isso:http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html

Mas em vez de navegação de texto, eu tenho imagens como você pode ver no CSS anexado ao ID do intervalo. Com este código, recebo os menus suspensos para cada intervalo corretamente, não consigo me livrar do espaço em branco entre eles.

Eu conheço uma nova linha em HTML entre divs / spans create whitespaces, mas eu quero saber uma maneira de se livrar deles em 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>

Isto é algum 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;
}

O que eu preciso fazer com esse código em CSS para me livrar do espaço em branco que aparece entre minhas imagens de extensão?