CSS橫向菜單：文本底端對齊

好吧，我也不好與CSS菜單....我需要TO MAKE THIS但未能對齊文本列表的底部liCSS橫向菜單：文本底端對齊

所以它試圖用表來做到這一點。。我在想顯示模塊會解決我的問題，但事實證明它沒有......你看到在我發佈的jsFiddle例子中，當鼠標位於單元格的頂部區域時，鏈接不工作，這是真的，因爲有沒有鏈接有...請有人請告訴我如何將其轉換爲CSS菜單

來源

2010-12-02 Moon

永遠不要使用這樣的表格，表格僅用於表格數據和電子郵件，僅此而已。 – Kyle 2010-12-02 08:25:54

我會建議使用無序列表而不是表格來製作菜單。事情是這樣的：

HTML：

<ul id="my_menu"> 
<li><a href="linktopage" title="titleofpage">Name of Page 1</a></li> 
<li><a href="linktopage" title="titleofpage">Name of Page 2</a></li> 
<li><a href="linktopage" title="titleofpage">Name of Page 3</a></li> 
<li><a href="linktopage" title="titleofpage">Name of Page 4</a></li> 
</ul>

CSS：

ul#my_menu, ul#my_menu li {list-style: none;} 

ul#my_menu li {display: block; float: left; width: 100px; height: 100px;} 
ul#my_menu li a {display: block; text-decoration: none; color: #ccc; background: url('url_of_gradient') repeat-x; padding: 70px 10px 10px 10px; width: 80px; height: 20px;} 
ul#my_menu li a:hover {background: url('url_of_hover_gradient') repeat-x;}

嘗試是這樣的，設置一個梯度圖像（你必須讓這個）的鏈路上的背景。然後爲懸停狀態創建另一個圖像。你還必須根據自己的喜好調整高度和寬度。

這不應該需要任何JavaScript。

來源

2010-12-02 09:01:51 coryetzkorn

分鐘變化...寬度和高度和墊片http://jsfiddle.net/Dxp68/ – Moon 2010-12-02 09:57:32