Создадим меню из себя списка, в котором каждый пункт будет являться ссылкой на какую-то страницу.
Для того, что бы меню не выглядело скучным задаём маркерам пунктов некоторый цвет и тип, а так же цвет самим названиям пунктов . Текст заключаем, например, тегами ссылки "<a></a>".
Стилевые атрибуты задаются между тегами "<style></style>". Вы увидите стиль для маркера (li) и стиль для текста внутри пункта (a)
<html>
<head>
<title> Меню </title>
</head>
<body>
<style>
li {
color: violet;
}
li a {
color: #45ADD0;
}
</style>
<ul type="square">
<a>МЕНЮ</a>
<li> <a href=" ">Главная</a></li>
<li><a href=" ">1 страница </a></li>
<li><a href=" "> 2 страница</a></li>
<li><a href=" ">3 страница</a></li>
</ul>
</body>
</html>
В примерах, вместо ссылок на конкретные таблицы оставим пробелы " "
МЕНЮ
Создадим нечто более красивое и полноценное.
Помимо типов маркеров – для пунктов расположенных между тегами <li></li> зададим цвет заднего фона, отступы, длину, а так же цвет и толщину рамки.
<style>
ul.bord li {
list-style-type: none;
background: #CEECF5;
border: 2px solid Yellow;
width: 150px;
}
</style>
<ul class="bord">
<li>МЕНЮ</li>
<li>Главная</li>
<li>1 страница</li>
<li>2 страница</li>
<li>3 страница</li>
<li>4 страница</li>
</ul>
- МЕНЮ
- Главная
- 1 страница
- 2 страница
- 3 страница
- 4 страница
А теперь сделаем вертикальное меню. Для этого нужно прописать две стилевых группы – для пунктов в обычном состоянии и для пунктов на которые навели курсор мышки – то есть описать событие :hover
<style>
ul.menu_bord li {
list-style-type: none;
background: #81BEF7;
border: 1px solid White;
width: 200px;
color: White;
padding: 8px;
}
ul.menu_bord li:hover {
background: White;
border: 1px solid #3A01DF;
border-left: 3px solid #3A01DF;
width: 200px;
color: Black;
padding: 8px;
}
</style>
<ul class="menu_bord">
<li>Главная</li>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ul>
Фантазируя, вы сможете сделать красивое оригинальное меню.
| 
