Question

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

so 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

Answer 1

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.