Question

我对CSS菜单不太满意....我需要TO MAKE THIS但无法将文字对齐到列表li的底部

所以它试图用表来做这件事..我在想Display Block会解决我的问题，但事实证明它没有...你看到我发布的jsFiddle示例，当鼠标位于顶部区域时单元格链接不起作用这是真的，因为那里没有链接...有人可以请告诉我如何将其转换为CSS菜单

Answer 1

我建议使用无序列表而不是表格来制作菜单。像这样：

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。

Answer 2

这是一个可以帮助你入门的CSS菜单生成器，我之前使用它并且它对我的项目来说很好:)

Suckerfish dropwdown generator

更多：

希望有所帮助：）

CSS水平菜单：文本对齐底部

2 个答案: