Spry menu text awful spacing

Question

I have a spry menu and in the menu you have sub-menus and the spacing between the numbers is awful. I have changed almost everything in the spry menu css but the spacing won't change. I think it has something to do with padding but can't confirm that for sure. So my question is: Why is the spacing so big between the submenu text?

Example Here.

Here is what the submenu css is:

ul.MenuBarHorizontal ul
{
margin: 0;
padding-top: .5em;
padding-right: .75em;
padding-bottom: 5em;
padding-left: .75em;
list-style-type: none;
font-size: 50%;
z-index: 1020;
cursor: pointer;
width: 83px;
position: absolute;
left: -100em;
border: 0px;
text-align: center;
top: 91px;
height: 307px;
    }

I have looked in other question but none of them seem to answer my question. I have read up on spry menus, but no luck there. Maybe someone else can give me some advice.

So let me summarize my question. What do I need to change to have the space of text in sub-menu so that they aren't so far apart?

Answer 1

You are not selecting the sub menu elements properly:

It should be something similar to :

ul li ul li a{
}

or

ul.MenuBarHorizontal ul li a {
}

or

ul.MenuBarHorizontal ul li a {
    margin: 0;
    padding-top: .5em;
    padding-right: .75em;
    padding-bottom: 5em;
    padding-left: .75em;
    list-style-type: none;
    font-size: 50%;
    z-index: 1020;
    cursor: pointer;
    width: 83px;
    position: absolute;
    left: -100em;
    border: 0px;
    text-align: center;
    top: 91px;
    height: 307px;
}

Try hovering over one of the submenus, right click and select "inspect" element. You can see the HTML make up of the controls you are trying to target.

Once you have the right CSS selectors your styling should start working.