sportsmen
actors
tv people
singers
celebrities
politicians
Here's the relevant CSS (link to
actual CSS file
):
/* category menu */ ul#cat_menu { float:left; width: 20em; height: 21.5em; height: expression('23.8em'); /* MSIE hack */ overflow: hidden; background-color: #333333; margin: 0 auto; list-style-type: none; padding: 0; text-indent: 0; position: relative; } ul#cat_menu li { padding: 0; margin: 0; border-top: 1px solid #484848; height: 3.5em; overflow: hidden; } ul#cat_menu li a { font-size: 1.8em; font-weight: bold; padding: 0.7em 0.5em 0.2em 4em; color: #FFCC33; text-transform: uppercase; text-decoration: none; display: block; height: 4em; background-position: 6% top; background-repeat: no-repeat; } ul#cat_menu li a#cat_sportsmen { background-image: url(../img/icon_sportsmen.gif); } ul#cat_menu li a#cat_politicians { background-image: url(../img/icon_politicians.gif); } ul#cat_menu li a#cat_celebrities { background-image: url(../img/icon_celebrities.gif); } ul#cat_menu li a#cat_actors { background-image: url(../img/icon_actors.gif); } ul#cat_menu li a#cat_singers { background-image: url(../img/icon_singers.gif); } ul#cat_menu li a#cat_tv_people { background-image: url(../img/icon_tv_people.gif); }
And here's
the JavaScript behind it
.
You may also want to read the
original blog post for this script
.