Я что-то плохонепонял

Для того, что бы сверстать горизонтальное меню средствами div+css, необходимо обладать некоторыми знаниями в данной области. В этот раз я Вам расскажу как это сделать и в очередной раз Вы пополните свою копилку ЗНУ (знания, навыки, умения).

Открываем любой визуальный редактор и переходим в режи отображения html кода. В новом, только что созданном документе создаем пункты будущего меню, которые должны выглядеть следующим образом(в режиме html):

<ul>
<li>главная</li>
<li>новости</li>
<li>скрипты</li>
<li>контакты</li>
<li>дизайн </li>
</ul>

Сразу же создаем в том же документе запись для работы со стилями css, которые будут определять положение и отображение меню. Вот тут будем записывать правила для тегов меню:

<style type="text/css">
<!--
/* hor menu */
тут запишем правила для тегов меню
/* end hor menu */
— >
</style>

Так как в меню мы в любом случае используем ссылки, то сразу их и пропишем. Должно получиться так — <li><a href="#">главная</a></li> такую процедуру проделываем для каждого пункта.

Задаем нулевые margin и padding для тега ul, ширину меню 300 пикселей и убираем квадратные точки слева. Для удобства добавим бекграунд:

ul {
margin:0;
padding:0;
width:300px;
list-style:none;
background:#FFFF99;}

А почему же наше горизонтально меню совсем не горизонтальное спросите Вы. А добавьте в конец списка правил для тега ul вот эту строку float:left; и создайте такое же правило для тегов li , которые находятся внутри тега ul. Это будет выглядеть так:

ul li {
float:left;}

Т.к. пост о создании горизонтального оменю получается очень объемным, я решил сначала выкладывать целиком список правил для какого-нибудь тега и потом их описывать.

ul a {
display:block;
margin:0;
padding:0 0.7em;
line-height:2.1em;
text-decoration:none;
color:#339966;}

Данный список определяет отображение ссылок, котрые заключены между тегами ul и первая строка в совокупности со второй, третьей и четвертой заставляют ссылку выглядеть кнопкой. Т.е. мы задаем отступы слева и справа от каждой надписи размером 0.7em, высоту строки определяем размером 2.1em, ссылку оставляем неподчеркнутой и окрашиваем в зелененький цвет. Так как мы использовали отступы. появилась необходимость немного увеличить ширину всего меню. Я сделал в данном случае 390 пикселей.

ul a:hover {
text-decoration:underline;
color:#33FF66;
margin-top:1px;}

Список правил для ссылки в момент наведения на нее курсора (обычно называют наведенная ссылка). Итак при наведении на ссылку она подчеркивается, окрашивается в светло-салатовый цвет и немного смещается вниз, что имитирует небольшую анимацию для Вашего меню. Если анимация не вписывается, то ее вполне можно исключить.

Ну вот и все, верстка горизонтального меню закончена. Если добавить еще немного воображения и фантазии, то можно чего-либо добавить или изменить по своему усмотрению. Например отрисовать в фотошопе кнопочки и добавить их как бекграунд. Так же еще хотел бы предложить вариант всплывающего меню для вашего сайта.

Как обычно делюсь полезными ресурсами в конце каждой заметки и на сегодня это сайт об автомобилях бмв в россии. Есть у меня желание купить машину, вот иногда и приходится заглядывать на подобные сайты.