Я сделал кнопки, которые переносят на другую страницу. Проблема заключается в том, что ВЕСЬ текст фиолетовый и с подчёркиванием. Ниже прикреплю скриншот, чтобы было понятно, о чём я. Как можно исправить эту проблему? Чтоб не было не одной фиолетовой ссылки
<!DOCTYPE html>
<html>
<head>
<title>Титул</title>
<meta charset = "utf-8">
<style type="text/css">
ul {
display: block;
text-align: center;
background: grey;
}
li{
width: 60px;
height: 50px;
display: inline-block;
font-size: 150%;
background-color: grey;
padding: 0.5rem 5rem; /* Поля вокруг текста */
margin-right: 50px;
text-decoration: none;
}
li:hover{
background-color: darkgrey;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
body{
background-color: lightgrey;
}
p{
font-size: 110%;
font-family: Helvetica;
text-indent: 2em;
margin-left: 100px;
}
div{
width: 50000px;
margin: -10;
background-color: grey;
height: 70px
}
z{
text-shadow: 0 0 3px black;
font-size: 200%;
font-family: Helvetica;
}
</style>
</head>
<body>
<z style="margin-left: 1000px;">
Компания
</z>
<br>
<br>
<ul>
<li>
<a href = "file:home_page.html", target="_self">Главная
</li>
<li>
<a href = "file:about.html", target="_self">О нас
</li>
<li>
Услуги
</li>
<li>
Контакты
</li>
</ul>
<br>
<br><br><br>
<p id = "Test">
Текст главной страницы
</p>
</body>
</html>