a{
                text-decoration: none;
                color: black;
            }
            a span {
                visibility:hidden;
            }
            a:hover span {
                font-family: tahome;
                font-size: 16px;
                color: black;
                border: 0px;
                position:absolute;
                visibility:visible;
            }
            #menu a span {
                top: 3em;
                left: 40%;
            }
            #menu {
                margin: 5em 5em 5em 5em;
                background: #333;
                list-style: none;
                width: 100%;
            }
            #menu li {
                display: block;
                text-align: center;
                font: 67.5% \"Lucida Sans Unicode\", \"Bitstream Vera Sans\", \"Trebuchet Unicode MS\", \"Lucida Grande\", Verdana, Helvetica, sans-serif;
                line-height: 25px;
            }
            #menu a {
                background: #333;
                color: #ccc;
                width: 10em;
                height: 2.5em;
                float: left;
                text-decoration: none;
            }
            #menu a:hover {
                background: #2580a2;
                color: #fff;
                }

<ul id=\"menu\">
        <li>
            <a href=\"#\">
           Test1
            <span>test1</span>
            </a>
        </li>
        <li>
            <a href=\"#\" >
            Test2
            <span>test2</span>
            </a>
        </li>
        <li>
            <a href=\"#\" >
            Test3
            <span>test3</span>
            </a>
        </li>
 </ul>