Создание меню
Меню разместим под шапкой. Под закрывающим тегом <header> добавим <div> с классом «clear»:
<div class="clear"></div>
Для правильного отображения добавим свойство float: left к тегу <header>:
<header style="float: left;"></header>
Далее, создадим блок меню:
<div id="menu"> </div>
Используем <div> с id="menu" вместо тега <menu> для лучшей совместимости. Добавим горизонтальную линию:
<hr>
И ссылки в меню:
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 3</a>
Стилизация меню и ссылок
Добавим стили CSS. Разместим их после стилей для <header>:
#menu {
color: /*укажите цвет*/;
font-family: Comic Sans MS, sans-serif;
font-size: 1.7em;
}
hr {
display: block;
width: 100%;
height: 1px;
border: 0;
border-top: 1px solid /*укажите цвет*/;
margin: 0;
}
#menu a {
padding: 5px;
border-radius: 5px;
color: /*укажите цвет*/;
}
#menu a:hover {
background-color: /*укажите цвет*/;
padding: 10px;
}
Добавим ссылки с контентом:
<a href="about.html">О нас</a>
<a href="#">Обратная связь</a>
<a href="#">Вход</a>
<a href="#">Регистрация</a>
Экспериментируя с цветами и отступами, можно добиться желаемого эффекта, например, эффекта наведения мышки на ссылку, подобного тому, что используется в Facebook.
Создано простое меню с использованием HTML и CSS. Настройкой стилей можно изменить внешний вид меню и сделать его более привлекательным. Экспериментируйте с цветами, отступами и эффектами наведения для достижения оптимального результата.