設計筆記本

資料來源：wowboxBlog

CSS

#Menu{ width:480px; margin:50px auto; border:1px solid #CCC; overflow:hidden; }

#Menu ul{ margin:0;padding:0;list-style:none;}

#Menu li{ width:80px; height:22px; line-height:22px; float:left; overflow:hidden; text-align:center; }

#Menu a{ width:80px;float:left;overflow:hidden;}

#Menu span{display:block;margin-top:-22px;}

#Menu a:hover{padding-top:22px;}

html

<ul id="Menu">
<li><a href="#"><span>Home</span>首頁</a></li>
<li><a href="#"><span>News</span>新聞</a></li>
<li><a href="#"><span>About</span>關於</a></li>
<li><a href="#"><span>Contact</span>聯繫</a></li>
<li><a href="#"><span>Photo</span>照片</a></li>
</ul>

關鍵元素在於#Menu a:hover{padding-top:22px;}