CSS Horizontal Menu: Text unten ausrichten

Question

Nun, ich bin nicht gut mit CSS-Menüs .... ich brauche TO MAKE THIS konnte aber Text der Unterseite der Liste auszurichten li

so versucht es dies mit Tabellen zu tun. Ich dachte, Display Block wird meine Probleme lösen, aber es stellte sich heraus, dass es nicht ... Sie sehen in der JsFiddle Beispiel, dass ich gepostet, wenn die Maus auf den oberen Bereichen der Zelle ist der Link funktioniert nicht, was wahr ist, weil es gibt kein Link dort ... kann jemand mir bitte sagen, wie man es in CSS umwandeln Menü

Answer 1

würde ich schlagen vor, das Menü mit einer ungeordneten Liste anstelle von Tabellen zu machen. Etwas wie folgt aus:

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

Versuchen Sie so etwas wie dieses, ein Gradientenbild Einstellung (Sie werden dies machen müssen) als Hintergrund auf die Links . Erstellen Sie dann ein anderes Bild für den Hover-Status. Sie müssen auch die Höhen und Breiten nach Ihren Wünschen anpassen.

Dies sollte kein Javascript erfordern.

Answer 2

Hier ist ein CSS-Menü-Generator, der Sie starten kann, habe ich es vor einer Weile verwendet und es war gut für mein Projekt :)

Suckerfish dropwdown generator.

Mehr:

My CSS Menu

Wonder Webware

Pure CSS Menu

The list goes on...

es Hoffnung hilft :)