How to make the CSS-TRICKS nav bar?

[lllxjy]

Hi guys!
I was trying to figure out how to make the nav bar of CSS-TRICKS. It’s like when you hover your mouse over it, the width changes. I looked at the CSS source but I couldn’t do it myself.
nav li:hover a{width:24%}
nav ul:hover .active{width:19%}
nav ul:hover .active:hover{width:24%}
This part makes me confused. And where should I assign the reference width(100%)? Thanks!

[Bob]

If I’m understanding the code you posted correctly, it does the following:

when you hover over a anchor link in the a list item tag (which will be Home, Forums Videos, Downloads and Snippets), the width of that element will be 24%. Also, since you’re hovering over an li element that is inside a ul element, the active tab of the navigation (defined by the .active class) will be shrink to 19%. However, should you hover over the active tab, you don’t want it to shrink to 19% and thats what the last line does; it overrides the line above that, so when you hover over the active tab, it will stay at 24%.

I hope that makes sense.

[Author]

Posts