Horiz CSS menu - text shifting on bold hover. Can't find a solution anywhere!

Hi there,

I created a horizontal CSS menu using good 'ol HTML lists.


<ul id=“navigation”>
<li id=“youarehere”><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>


Everything works as it should, expect when you hover over the links. You see, I created a bold hover state for the links, and now the menu links shift because of the bold size difference.

I’ve searched everywhere for a solution, and can’t find one.

Surely, I can’t be the only one trying to do this.

Hmm not sure if this will help but have you tried adjusting the padding on hover state? To make up for the font size increase. Or give the elements a fixed width.


Adjusting the hover padding does nothing but increase the gap on hover, and negative values have no effect.

Also, the navigation already has a right padding of about 20px to separate the links.

What do you mean about giving the elements a fixed width? Sorry, I’m a bit of a noob when it comes to CSS.

Set a width on the elements that contain the text so they wont auto-adjust by the text.

To elaborate:


ul#navigation {list-style-image: none; list-style-position: outside; list-style-type: none;}
li {float: left; [B]width: 80px[/B]; }
a {font-weight: normal}
a:hover {font-weight: bold}


<ul id="navigation">
<li id="youarehere"><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>

Hey there,

Thanks for the hlep. That seems to work, but it creates a new problem…

Since all of the links have the same width, you need to center justify the ‘li style’ so the text is centered in each element (otherwise you get uneven gaps between the links).

However, I specifically need the far left link to be left justified in order to line up with my design.

Any ideas?

I guess you could hae a rule for youarehere:

#youarehere {text-align: left;}

Really, though, this seems a lot of trouble just for the bold effect. There are so many cool things you can do to highlight a link, like underlines, background images appearing… Are you sure you really want the bold effect?

I assume this padding is on the <li>s ? - If you used right margin on the <a>s instead of right padding on the <li>s, then you could set a smaller right margin on hover of the <a>s.

Either that or apply a small right padding to the <a>s normally and remove it on hover.

Either of these will be a compromise as you can’t really tell how much the total text expands on bold.