При создании меню сайта можно столкнуться с проблемой ограниченности пространства, необходимостью экономить место и избегать нагромождения лишней информации. Все это удобно решается элементами, которые скрываются, когда не нужны. Если хочется избежать использования скриптов, такое меню можно создать с помощью средств html и css. 
Вам будет интересно:Как добавить полосу прокрутки
Вопрос «Как сделать страницу без .html» - 2 ответа
Инструкция
Составьте меню, определите его структуру. Расположите элементы в удобном для будущего пользователя порядке. Подумайте над понятными и грамотными названиями разделов. Определите пункты, которые должны быть выпадающими, и подпункты, которые будут в этих выпадающих списках.
Оформите придуманную структуру с помощью html-тэгов. Это будет выглядеть примерно следующим образом:
Поместите все меню в блок
Создайте списки, где
- - сам список, а
- - каждая из его строк. Добавьте для всех будущих ссылкок, которые должны создавать выпадающее меню, свой список с подпунктами. Превратите названия пунктов меню в ссылки, заключив их в тэг . Присвойте его параметру href адрес страницы, на которую будет указывать ссылка.
Задайте свойства списка через css, внеся их в css-файл: #vmenu ul { margin:0px; padding:0px; list-style:none; width:250px; }. Задайте равными нулю отступы padding - отступ внутри и margin - отступ снаружи элемента списка. Укажите list-style - стиль маркированного списка, по умолчанию с точками, которые при значении none убираются. Введите ширину списка width.
Добавьте свойства элемента списка: #vmenu ul li { position:relative; }. Укажите параметр позиционирования, то есть расположения элементов position. Присвойте ему относительное значение relative, чтобы определять расположение выпадающего меню относительно изначального. Создаваемое меню будет вертикальным.
Укажите свойства для списка, расположенного в элементе другого списка: #vmenu li ul { position:absolute; left:250px; top:0; display:none; }. Присвойте параметру позиционирования position значение absolute, чтобы осуществлять абсолютное позиционирование подменю относительно пункта меню. Задайте расположение с помощью отступа пространства слева left и сверху top. Определите параметр отображения элемента display как none, поскольку изначально выпадающий список не должен быть виден.
Внесите параметры для ссылок: #vmenu ul li a { display:block; padding:5px; text-decoration:none; color:#606060; background:#d8d8d8; }. Присвойте параметру отображения display значение block, делающее элемент блочным. При этом он видимый и ведет себя, как блок. Задайте отступ padding, цвет текста ссылки color, цвет фона ссылки background, стиль ссылки text-decoration. Значением none убирает подчеркивание по умолчанию.
Задайте действие при наведении курсора: #vmenu li:hover ul { display: block; }. Укажите, что при наведении курсора на строку списка li, список ul, расположенный в нем, становится видимым.
Добавьте по желанию параметры цвета или изображения для фона, горизонтальные черты, шрифт ссылок и другие свойства, определяющие внешний вид меню.
Обратите внимание Данный метод решения, увы, не работает для старых версий браузера Internet Explorer.
Источник
