没有图像的 jQuery 翻转菜单

Question

我被一个看似简单的翻转任务困住了。

黑色是默认状态，蓝色是悬停状态。

如您所见，在默认状态下仅显示后面的数字，在悬停时，必须添加 20(没问题)，更改颜色(没问题)，并且整个内容必须垂直位于中间(问题)。

这是我到目前为止所得到的 jsFiddle:http://jsfiddle.net/markushausammann/3YPXk/

什么标记和 CSS 可以在不使用图像的情况下实现这种行为？ ¡

编辑:标记并不重要，它是一个正常的水平 ul li 标记。但以下是标记的示例:

<div id="nav-years">
   <ul>
      <li><a href="#" id="2002"><p class="supertext">20</p><p>02</p></a></li>
      <li><a href="#" id="2003"><p class="supertext">20</p><p>03</p></a></li>
      <li><a href="#" id="2004"><p class="supertext">20</p><p>04</p></a></li>
      <li><a href="#" id="2005"><p class="supertext">20</p><p>05</p></a></li>
    </ul>
</div>

还有一些 CSS，但这可能需要针对相应的解决方案进行调整。

/* years navigation */
#nav-years {
    position: relative;
    display: block;
    width: 400px;
    height: 70px;
}

#nav-years ul {
    display: block;
    height: 70px;
    list-style: none;
}

#nav-years li {
    display: block;
    height: 35px;
    width: 35px;
    float: left;
    text-align: center;
    margin: 0 15px;
    overflow: hidden;
}

#nav-years a {
    display: block;
    width: 35px;
    color: #000000;
    font-size: 30px;
}

Answer 1

类似这样的东西，但是很好:

http://jsfiddle.net/vUCgm/

您想开始使用行高和 :hover psuedo 类。