CSS Menu horizontal: Texte Aligner en bas

Question

Eh bien, je ne suis pas bon avec des menus CSS .... i besoin TO MAKE THIS, mais n'a pas pu aligner le texte au bas de la liste li

il a essayé de le faire avec des tables. Je pensais que Display Block allait résoudre mes problèmes mais il s'est avéré que non ... vous voyez dans l'exemple jsFiddle que j'ai posté, quand la souris est sur les zones supérieures de la cellule, le lien ne fonctionne pas, ce qui est vrai parce qu'il y a pas de lien là-bas ... quelqu'un peut me dire comment le convertir en CSS Menu

Answer 1

Je voudrais suggère de faire le menu avec une liste non ordonnée au lieu de tables. Quelque chose comme ceci:

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

Essayez quelque chose comme cela, définir une image de gradient (vous devrez en faire) en arrière-plan sur les liens . Puis créez une autre image pour l'état hover. Vous devrez également modifier les hauteurs et les largeurs à votre goût.

Ceci ne devrait pas nécessiter de javascript.

Answer 2

Voici un générateur de menu CSS qui peut vous aider à démarrer, je l'ai utilisé il y a quelques temps et ça s'est bien passé pour mon projet :)

Suckerfish dropwdown generator.

Plus:

My CSS Menu

Wonder Webware

Pure CSS Menu

The list goes on...

Hope it helps :)