Recently, I created a navigation bar on Chrome and everything seems to be working fine. However, when I tested it on Firefox, I noticed that there is an unexpected dot appearing in front of each navigation tab. Does anyone have any idea why this might be happening and how I can go about fixing it? It's not a major issue, but if there's a solution, I'd like to address it. Thank you in advance for your assistance, and I hope you have a fantastic day!
https://i.sstatic.net/ser5z.png
Below is the code snippet that I am currently using:
<html>
<head>
<title>Blitz</title>
<link rel="stylesheet" type="text/css" href="Stylesheet.CSS">
<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
<body background="http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg">
<header>
<div class="Nav">
<h2><center><strong>Blitz</strong></center></h2>
<ul>
<li><a href="index.php">Home |</a></li>
<li><a href="#">Forums |</a></li>
<li><a href="#">Blog |</a></li>
<li><a href="#">About us |</a></li>
<li><a href="#">Info </a></li>
</ul>
</div>
</header>
</body>
</html>
/*CSS script*/
body{
margin:0;
padding:0;
}
.Nav{
margin:0 auto;
width:75%;
height:auto;
background:#A7EAFC;
overflow:auto;
border-bottom: 2px solid black;
}
.Nav ul li{
float:left;
}
.Nav a{
margin-right:20px;
margin-left:20px;
color:black;
text-transform:uppercase;
text-decoration:none;
font-family: Arial sans-serif;
font-weight: bold;
}
.Nav a:hover{
color:blue;
text-decoration:underline;
}