Vertical spacing in CSS menu

[Neil Hillman]

Hi,
I am trying to create a small compact sidebar menu in CSS, and have got pretty close to what I wanted to achieve, except for one thing, the vertical spacing. It's too "gappy", I wanted it to look much more compact:
[neilhillman.com...]

So I tried changing the #side-bar li margin from:

#side-bar li {
 margin: 0px;
 padding: 0.1ex 0;
}

to:

#side-bar li {
 margin: 0px 0px -10px 0px;
 padding: 0.1ex 0;
}

This is much closer to what I wanted, except for 2 problems.
Firstly, the bottom menu item is now cut off the list, and secondly, the "on hover" background block is too big, overlapping the item above and below it in the list:
[neilhillman.com...]

If anyone can tell me how to do this properly I would really appresiate it!
Regards,

Neil

[jessejump]

Do you look at menu 2 in Firefox?
All the items are almost on top of each other.

[Ingolemo]

I haven't looked at your example pages since links aren't allowed here, but have you tried using

line-height

(set it to something like 80%)?

[doodlebee]

All the items are almost on top of each other.

Almost? LOL more like they *are* on top of each other. I can't read half of them.

By the way, what is "ex"?

padding: 0.1ex

[jessejump]

EX

similar to em
the height of "x"