Подскажите плиз! Почему я создаю в HTML тег " " в него закладываю "UL" и LI, а в "LI" текст которому хочу придать нужное изображение. В CSS делаю селектор - .menu, прописываю туда правила, но почему то это не влияет на LI, что бы изменить текст, мне приходится прописывать правила непосредственно для "LI". в чем причина?, и как сделать так что бы правила для блока .menu распространялись на текст внутри его? Ведь LI я хотел добавить еще в некоторые блоки уже с другими правилами.
<!DOCTYPE html>
<html lang="en">
<head>
<title>MySite</title>
<meta charset="utf-8">
<link rel="stylesheet" href="text/style.css">
</head>
<body>
<header class="page-header--home">
<div class="menu">
<ul>
<li>Группа творчества</li>
<li>Статьи</li>
<li>Форум</li>
<li>Видео</li>
<li>Вход</li>
</ul>
</div>
</header>
</div>
<div class="avtorizacia">
<input type="submit" name="Поиск">
</div>
</body>
</html>
body{
background-image: url(..//img/MS3.jpg);
max-width: 1920px;
margin: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.page-header--home{
position: relative;
background-image: url(..//img/MS4.jpg);
width: 1920px;
height: 80px;
margin-top: 0px;
}
ul{
position: relative;
margin: 0px;
}
li{
display: inline;
font-size: 32px;
font-family: "Tahoma";
font-weight: 800;
color: #45a8ff;
margin: 0px;
margin-top: 5px;
margin-left: 80px;
margin-right: 80px;
}
.avtorizacia{
position: relative;
background-color: rgba(31, 16, 16, 0.75);
max-width: 80px;
height: 250px;
margin-top: 100px;
}