Line height of wrapping text in list items

On the http://steve.brettatkin.com/projects.php when you hover over "Work", a sub-menu appears. The 4th and 5th links have text that 开发者_开发技巧wraps. How do I decrease the line-height so that the second line of the link doesn't look like a new link?

I've tried a combination of margin/padding/line-height on the <li> but it isn't working.

Remove the line-height from the <a> inside your <li>s and put it on the <li>s instead, then use margin-top and margin-bottom for the margin between the <li>s and use the line-height for the line-height of single <li>s

(making the hover state of the <a>s there bold also makes the menu jump when hovering cause it no longer always fits on 1 line)

I usually solve that by using x padding-left and -x text-indent. This way the text that wraps will be indented, but not the first line.

#navigation li {
  padding-left: 10px;
  text-indent: -10px;
}

If you want to change the line-height, however, take notice that you will need some sort of margin from the previous items - otherwise they'll just compress together as well. Maybe:

#navigation li a {
  line-height: 1.2em;
}
/* a in (li next to li) = only second item and forward */
#navigation li+li a {
  margin-top: 10px;
}

The line-height current set for the drop down lists on your menu is 25px. Try lowering this to half that:

line-height: 14px;

You may need to up the margin-bottom of the parent LI element then from 3px to counter the reduced line-height of the link elements.

Adding this to the sub tags should sort it:

line-height: 14px;
margin-bottom: 15px;

You might want to add the latter to the LI rather than the A.