Lots of other places suggestion using text-shadow to handle bold hover/active states. My client had a complaint that it made the text look blurry (which it absolutely does). Here’s my solution (written using general CSS selectors). Let me know what you think!
The letter-spacing is not perfect, and there is still a tiny sub-pixel of movement, but it was a compromise between actually-bold text and blurry-bold text. Adjust to your needs.
I spent a number of hours yesterday trying to figure out how to customize individual links for the main menu. Drupal 8 is a bit more straightforward, but it isn’t quite so obvious in Drupal 7. There are no template suggestions or theme hooks in the HTML comments when you turn theme debugging on, so it took me a while to figure it out.
Thankfully, with the help of PhpStorm and xdebug, I was able to pinpoint what template file to create:
Here’s my code that allows me to replicate the menu links exactly. Then customize as you wish.
<li class="<?php print implode(' ', $element['#attributes']['class']) ?>">
<?php print l($element['#title'], $element['#href'], $element['#localized_options']); ?>
<?php print drupal_render($element['#below']); ?>