Cant select pages listed in my nav bar

1

This is my escaped html

<!DOCTYPE html>
<html lang = "en">

<!–This is my first comment in my index page–>
<head>

<meta charset="utf-8">
<link rel="stylesheet" href="greentea.css">
<a href= "greentea.html"></a>

</head>

<!–This is the body of my page–>
<body>
<header>
<h1>Teaz Nuts</h1>
<br>
<nav>
<ul>

&lt;li&gt;&lt;a href= &quot;greentea.html&quot;&gt; Home &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;about.html&quot;&gt;Login&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;Product.html&quot;&gt;Product&lt;/a&gt; &lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;New User Signup.html&quot;&gt;New User Signup&lt;/a&gt;&lt;/li&gt; 
&lt;/ul&gt;

</nav>

<main>

<div>
<image src = "hippiegirl.jpg" alt = "tranquility"></image>
</div>

<p>The properties of green tea are many and varied. Especially during an epidemic<br>
we all need to be aware of what tea can do for us. Along with its antibiotic properties, it also<br>
can cleanse the spirit and wash away our tensions. </p>

</main>

<footer>
<br>&copy;
<a href="mailto:jackcole861@gmail.com">Click to email Jack Cole</a>
</footer>

</body>

</html>

And this is my css

div

{

position:absolute;

left:0;

top:0;

width:400%;

height:auto;

opacity:0.6;

}

body{

background-color: lightgreen;

}

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

li {

float: left;

}

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

/* Change the link color to #111 (black) on hover */

li a:hover {

background-color: #111;

}