Рекомендую сразу посмотреть демо. Сегодня я пошагово расскажу, как можно сделать красивое CSS меню самому. Для начала нам нужно нарисовать фон. Для этого используем программу Photoshop.

Вот, что из этого получилось:

Затем нам нужно нарисовать кнопочки для меню:

После кнопочек делаем подпись к ним:

Теперь проделываем все тоже самое для двух оставшихся кнопочек и вы должны получить набор рисунков, которые будут выглядеть примерно так:

И как же все это будет работать?! На самом деле все проще, чем кажется. Наши кнопки будут смещаться, тем самым создавая иллюзию подмены рисунка. На самом деле рисунок будет один и тот же, только показан будет разная часть кнопки:

На этом наши художества заканчиваются, теперь приступаем к программированию:

Код HTML:

<ul id="menu">
    <li><a href="#" class="home">Home <span></span></a></li>
    <li><a href="#" class="about">About <span></span></a></li>
    <li><a href="#" class="rss">RSS <span></span></a></li>
</ul>

Это вставляем в CSS файл:

#menu {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 774px;
        height: 210px;
        background: url(images/menu-bg.jpg) no-repeat;
        position: relative;
    }
    #menu span {
        display: none;
        position: absolute;
    }
    #menu a {
        display: block;
        text-indent: -900%;
        position: absolute;
        outline: none;
    }
    #menu a:hover {
        background-position: left bottom;
    }
    #menu a:hover span {
        display: block;
    }
    #menu .home {
        width: 144px;
        height: 58px;
        background: url(images/home.gif) no-repeat;
        left: 96px;
        top: 73px;
    }
    #menu .home span {
        width: 86px;
        height: 14px;
        background: url(images/home-over.gif) no-repeat;
        left: 28px;
        top: -20px;
    }
    #menu .about {
        width: 131px;
        height: 51px;
        background: url(images/about.gif) no-repeat;
        left: 338px;
        top: 97px;
    }
    #menu .about span {
        width: 40px;
        height: 12px;
        background: url(images/about-over.gif) no-repeat;
        left: 44px;
        top: 54px;
    }
    #menu .rss {
        width: 112px;
        height: 47px;
        background: url(images/rss.gif) no-repeat;
        left: 588px;
        top: 94px;
    }
    #menu .rss span {
        width: 92px;
        height: 20px;
        background: url(images/rss-over.gif) no-repeat;
        left: 26px;
        top: -20px;
    }

Вот, что у нас получилось. Красиво, не правда ли? По образцу и подобию Вы сами сможете создать себе какое-нибудь оригинальное меню для Вашего сайта.