CSS Horizontal Menu : Text Align Bottom

well i am not good with CSS menus.... i need TO MAKE THIS but was unable to align text to the bottom of listli

开发者_如何学JAVAso it tried to do this with tables.. i was thinking Display Block is gonna solve my problems but turned out it didn't... you see in the jsFiddle example that i posted, when mouse is on the top areas of cell the link doesnot work which is true because there is no link there... can somebody please tell me how to convert it to CSS Menu

I would suggest making the menu with an unordered list instead of tables. Something like this:

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;}

Try something like this, setting a gradient image (you'll have to make this) as the background on the links. Then create another image for the hover state. You'll also have to tweak the heights and widths to your liking.

This shouldn't require any javascript.

Here's a CSS menu generator that can get you started, I used it a while ago and it did fine for my project :)

Suckerfish dropwdown generator.

More:

My CSS Menu

Wonder Webware

Pure CSS Menu

The list goes on...

Hope it helps :)