Spacing Images apart in a <ul>

[BlackReef]

If you take a look at this site here:

http://tinyurl.com/cu6m5t6

Notice the top menu (home, bikes, my account, etc).

Those are basically just .png images in a <ul>

However, I would like to space those images out horizontally, so the menu should take up about 50% of the width of that entire bar.

Is there a simple way to do this in CSS, or should I just recreate the images themselves with wider dimensions to space it out?

Thanks!

[Excavator]

Hello BlackReef,
I'm not sure why you have that menu nested in 3 containing elements, #menu, #mainMenu and #electraMenu. Have a look at divitis and how to avoid it.

You also have heights and widths of containing elements set too small to contain the elements you've placed in them. Your menu is much taller than 11px so I'm not sure why .mainMenu would be that hight.

To space out your li elements, just use some margin... something like this -

.menu ul li a {
    color: #FFFFFF;
    float: left;
    margin: 0 20px;
    padding-left: 11px;
    padding-right: 11px;
    text-decoration: none;
}

[BlackReef]

Thanks Excavator! Ya Im working with an older system that has been through several revisions before my time. I just want to massage the CSS for now until we start with a new ecommerce platform. There is a ton of junk CSS/code

Thanks again!