Меню не меняет окрас при наведении
Вместо того, чтобы выделятся кнопке в меню при наведении, меню раздвигается.
Делал все по видео уроку 2.1 Вставка изображений и списков.
Перепроверил код вдоль и поперек, но никак не обнаружил ошибки, прошу помощи
Если убрать transition: .5s linear из тега а; то меню не выдвигается, переместил его в a:hover, стало выглядеть интереснее, но всё равно хотелось бы получить результат как показано в видеоуроке.
КОД в HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Моя первая страница</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="block1">
<div class="main-menu two">
<menu>
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Блог</a></li>
</menu>
</div>
<h1>Самый главный заголовок</h1>
<h2 align="right" class="red">Заголовок поменьше</h2>
<h6>Самый маленьнкий заголовок</h6>
<pre>Обычный текст</pre>
<img class="img-center" src="audi.png" alt="Audi" width="250">
<table border="3" align="center" width="500px" >
<caption>Европа</caption>
<thead>
<tr><th>Страна</th><th>Столица</th></tr>
</thead>
<tbody>
<tr><td>Польша</td><td>Варшава</td></tr>
<tr><td>Франция</td><td>Париж</td></tr>
<tr><td>Россия</td><td>Москва</td></tr>
</tbody>
</table>
<p align="justify" class="red">Смысл сайта
Сайт рыбатекст поможет <b><i><u>дизайнеру</u></i></b>, <i>верстальщику</i>, <u>вебмастеру</u> сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании <a href="#">генератора</a> мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.
По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у некторых людей недоумение при попытках прочитать рыбу текст. В отличии от lorem ipsum, текст рыба на русском языке наполнит любой макет непонятным смыслом и придаст неповторимый колорит советских времен.</p>
<img src="bmw.png" alt="Bmw" height="200">
<img src="volks.png" alt="Wolkswagen" height="200">
<ol type="a" start="4">
<li>Элемент 1</li>
<li value="15">Элемент 2</li>
<br>
<li>Элемент 3</li>
</ol>
</div>
</body>
</html>
Код в CSS:
body {
background-color: #a8635e;
color: white;
}
h1 {
font-size: 35px;
color: blue;
font-family: Arial;
text-align: center;
}
.red {
color: #5ea89b;
}
#block1 {
width: 80%; /* ширина(центровка) */
margin: 0 auto; /* внешний отспут ("auto" по центру) */
background-image: url(fon.png);
padding: 15px; /* отступ от краев */
border: 5px solid rgb(136, 135, 232); /* рамка */
border-radius: 30px;
}
b u {
color: blue;
}
menu {
list-style: none; /* убирает точки вначале */
margin: 0 auto;
}
a {
text-decoration: none;
transition: .5s linear;
font-family: Georgia;
}
.main-menu {
display: block;
width: 440px;
margin: 0 auto 30px;
}
.two menu {
background: #D4E7EE;
overflow: hidden;
padding: 0;
}
.two li {
float: left;
}
.two a {
display: block;
padding: 1em;
border-right: 1px solid #ADC0CE;
background: rgba(173, 192, 206, .3);
color: #29838C;
}
.two a:hover {
background: #ADC0CE;
}
a:hover {
text-decoration: none;
color: white;
}
img {
transform: scale(1);
transition: 2s all;
}
img:hover {
transform: scale(1.2); /* размер увеличивается */
}
.img-center {
display: block; /* отображается картинка как отдельный блок */
margin-left: auto; /* автом отступ */
margin-right: auto;
}
