Это мой код для выпадающего меню. Я взял код из учебника, который произвел это:http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html

Но вместо текстовой навигации у меня есть изображения, как вы можете видеть в CSS, прикрепленном к идентификаторам промежутков. С этим кодом мне дано правильное раскрывающееся меню для каждого диапазона, я просто не могу избавиться от пустого пространства между ними.

Я знаю новую строку в HTML между divs / spans, создающими пробелы, но я хочу знать, как избавиться от них в 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>

Это некоторый CSS, который применяется:

#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;
}

Что мне нужно сделать с этим кодом в CSS, чтобы избавиться от пробела, который появляется между моими span-изображениями?