Создаем простое HTML меню

В этой статье, я покажу, как создать простое меню, используя код HTML и CSS. Мы получим следующий вид меню:

HTML код меню:

<div id="navigation">
<ul>
<li><a href="#" title="Главная">Главная</a></li>
<li><a href="#" title="Наши продукты">Наши продукты</a></li>
<li><a href="#" title="Контакты">Контакты</a></li>
</ul>
</div>

<ul>

<li><a href="#" title="Главная">Главная</a></li>

<li><a href="#" title="Наши продукты">Наши продукты</a></li>

<li><a href="#" title="Контакты">Контакты</a></li>

</ul>

</div>

Получаем следующий вид меню:

Применим таблицу стилей для нашего меню. Стили подключаем в заголовке HTML странице:

<head>
<meta charset="utf-8">
<title>Меню</title>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>

<head>

</head>

@charset "utf-8";
/* CSS Document */
#navigation{
width:200px;/* Ширина пунктов меню*/
}
#navigation ul, #navigation ul li{
list-style:none;/* Убираем маркер списка в меню*/
margin:0;
padding:0;
}
#navigation ul li{
margin-bottom:5px; /* Расстояние между пунктами меню*/
}
#navigation li a{
background: #36C; /* Фон пунктов меню*/
color:#FFF; /* Цвет букв меню*/
border-left:7px solid #09F; /* Боковая полоса в меню*/
display:block; /* Задаем блочную структуру меню*/
padding:7px 7px 7px 20px; /* Отступы от полей меню*/
text-decoration:none; /* Убираем подчеркивание ссылок в меню*/
}
#navigation li a:hover{
background: #fff;/* Фон выделенного пункта меню*/
color:#000;
border:1px solid #36C;
border-left:7px solid #09F; /* Боковая полоса в меню*/
padding:6px 6px 6px 19px; /* Отступы от полей меню*/
}

@charset "utf-8";

/* CSS Document */

#navigation{

width:200px;/* Ширина пунктов меню*/

}

#navigation ul, #navigation ul li{

list-style:none;/* Убираем маркер списка в меню*/

margin:0;

padding:0;

}

#navigation ul li{

margin-bottom:5px; /* Расстояние между пунктами меню*/

}

#navigation li a{

background: #36C; /* Фон пунктов меню*/

color:#FFF; /* Цвет букв меню*/

border-left:7px solid #09F; /* Боковая полоса в меню*/

display:block; /* Задаем блочную структуру меню*/

padding:7px 7px 7px 20px; /* Отступы от полей меню*/

text-decoration:none; /* Убираем подчеркивание ссылок в меню*/

}

#navigation li a:hover{

background: #fff;/* Фон выделенного пункта меню*/

color:#000;

border:1px solid #36C;

border-left:7px solid #09F; /* Боковая полоса в меню*/

padding:6px 6px 6px 19px; /* Отступы от полей меню*/

}

Получаем: