CSS:

#css-menu ul {
list-style: none;
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
line-height: 1.4em;
border:2px solid #000000;
border-left: 1px solid #000000;
float: left;
padding: 0;
margin: 12px 0 25px 24px
}

#css-menu ul li {
float: left
}

#css-menu ul li a {
display: block;
text-decoration: none;
background-color: #595959;
padding: 5px 10px 0 10px;
color: #fefefe;
width: 120px;
border-right: 1px solid #797979;
border-left: 1px solid #191919
}

#css-menu ul li a span {
display: block
}

#css-menu ul li a span.text-top {
border-bottom: 1px solid #595959
}

#css-menu ul li a:hover span.text-top {
border-bottom: 1px dashed #fefefe;
color: #ffddbb
}

#css-menu ul li a span.text-bottom {
visibility: hidden;
font-size: 11px;
text-align: right
}

#css-menu ul li a:hover span.text-bottom {
visibility: visible
}

HTML:

<title>Создание красивого горизонтального CSS меню для сайта</title>
</head>
<body>
<div id="css-menu">
<ul>
<li><a href="#">
<span class="text-top">Главная</span>
<span class="text-bottom">О нашем проекте</span>
</a></li>
<li><a href="#">
<span class="text-top">Справочник</span>
<span class="text-bottom">CSS справочник</span>
</a></li>
<li><a href="#">
<span class="text-top">CSS уроки</span>
<span class="text-bottom">Для начинающих</span>
</a></li>
<li><a href="#">
<span class="text-top">CSS меню</span>
<span class="text-bottom">Коллекция CSS меню</span>
</a></li>
</ul>
</div>