Горизонтальное меню CSS: выравнивание текста снизу

Question

ну, я не очень хорошо разбираюсь с меню CSS .... мне нужно , ЧТОБЫ СДЕЛАТЬ ЭТО , но не удалось выровнять текст по нижней части списка 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-меню, с которого можно начать, я использовал его некоторое время назад, и он отлично работал для моего проекта :)

Генератор выпадающего сосунка .

Подробнее:

Мое меню CSS

Wonder Webware

Меню чистого CSS

Список можно продолжить ...

Надеюсь, это поможет:)