Increasing spacing in CSS drop-down menu bar

[notarypublic]

Some of the feedback for my current site is that there could be more spacing between the links in the navigation bar. It's constructed as an unordered list and uses CSS to hide and hover the drop-down menu items when the mouse moves over them.

I can change the width of the top link using a class, like

.navBarTitle {
width: 5 em;
}

------

<li class = "navBarTitle"><a href = "#">Link</a></li>

But by using a class this way they all end up the same length. I could use id's for each link, but that seems inefficient. Is there a way to append a set length of pixels at the end of the <li> before closing the </li> tag and starting the next one? I've tried setting different margins, using padding, spans.. No luck.

 

[DHDdirect]

I think the navigation looks good. but if you want you can cheat by putting just a couple spaces at the end using "&nbsp;" of course it's not best practice.

 

[notarypublic]

I think the navigation looks good. but if you want you can cheat by putting just a couple spaces at the end using "&nbsp;" of course it's not best practice.

I just uploaded a new version of the site (tiled background, different font color, some other minor fixes) and fixed the spacing issue by changing the padding value for the links inside of the <li> tags.

#nav ul li a {
padding-right: 2em;
}

-------------

<ul>
  <li><a href = "#">A link</a></li>
</ul>

This causes a slight bump on the right hand side of the links to increase the word spacing. As an added plus, this makes the boxes for the drop-down menu slightly larger as well.