Ваш lang класс находится на элементе li, это означает, что вы измените весь li, включая свой элемент, при его переводе, переместите свой key атрибут и lang класс в <a>.
кстати: ваш тег head неуместен, используйте заголовок в верхней части тега body, а не внутри него.
.nav{
height: 40px;
background-color: #105ea6;
height: 100px;
width: 100px;
}
nav ul{
color: #105ea6;
list-style: none;
text-align: center;
font-size: 25px;
}
nav ul li a{
color: #105ea6;
display:inline-block;
text-decoration: none;
text-align: center;
border: 2px grey solid;
width: 250px;
padding: 20px;
border-radius: 8px;
cursor: pointer;
}
nav ul li a:hover{
border: 2px grey solid;
padding: 20px;
width: 250px;
background-color: #105ea6;
color: #f4f4f4;
border-radius: 8px;
}
.header_navbar{
font-size: x-large;
text-align: center;
padding-left: 40px;
}
<!DOCTYPE html>
<html lang="de">
<head>
<script src="https://kit.fontawesome.com/9cef10a72a.js" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hauptmenü</title>
<link rel="stylesheet" type="text/css" href="CSS_AYNU/AYNU.Style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var arrLang = {
'en': {
'wateringzones': 'Wateringzones',
'sensors': 'Sensors',
'back': 'Back',
'mainmenue': 'Main menu',
'help': 'Help'
},
'de': {
'wateringzones': 'Bewässerungszonen',
'sensors': 'Sensoren',
'back': 'Zurück',
'mainmenue':'Hauptmenü',
'help': 'Hilfe'
}
};
// Process translation
$(function() {
$('.translate').click(function() {
var lang = $(this).attr('id');
$('.lang').each(function(index, item) {
$(this).text(arrLang[lang][$(this).attr('key')]);
});
});
});
</script>
</head>
<body>
<div class="header_navbar">
<header>
<button id="en" class="translate">English</button>
<button id="de" class="translate">Deutsch</button>
<br>
<h1 class="lang" key="mainmenue">Hauptmenü <i class="fas fa-bars"></i></h1>
</header>
</div>
<br>
<div class="navebar">
<nav>
<ul>
<li class="navbar"><a class="lang" key="wateringzones" href="AYNU_WATERINGZONES.html">Bewässerungszonen</a></li>
<br>
<li class="navbar"><a class="lang" key="sensors" href="AYNU_SENSORS.html">Sensoren</a></li>
<br>
<li class="navbar"><a class="lang" key="back" href="AYNU.Structure.html">Zurück</a></li>
</ul>
</nav>
</div>
<br>
<br>
</body>
</html>