Vertical Gap at End of List?

Vertical Gap at End of List?

I have a vertical UL list on a html page, with a sublist inside of it. At
the end of the sublist, it has an unwanted gap, like a linebreak, though I
can't seem to find anything in my css or html that would cause it (and my
attempts at trying to get it to go away aren't working very well).
Here's what it looks like;
1. Item
2. Item
1. Sub Item
2. Sub Item
3. Item
4. Item
My html code:
<ul class="fic">
<li class="fic"><a href="">item</li>
<li class="fic"><a href="">item
<ul class="fic">
<li class="fic">item</li>
<li class="fic">item</li>
</ul>
</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item
<ul class="fic">
<li class="fic">item</li>
</ul></li>
</ul>
And my css code that I was trying to use;
.fic ul {
padding: 0px;
margin: 0px;
}
And since my template came with menu code for the ul used in the
navigation bar, here's that;
#menu ul {
display: block;
width: 778px;
margin: 0em auto;
list-style: none;
padding-left: 2.5em;
}
#menu li {
display: inline;
}
#menu li a {
color: #ffffff;
font-weight: bold;
font-size: 1.2em;
text-decoration: none;
padding: 0.25em 0.75em 0.25em 0.75em;
}
#menu li a:hover {
background: #342117 url('images/hover.gif') top left repeat-x;
color: #fffdc6;
}
Help would be appreciated, thank you.