Rettifico quello che ho detto, con Firefox in locale funziona, con Chrome no. Qualcuno può spiegarmi il motivo?

Allego i miei 2 file aggiornati e funzionanti con Firefox:

Index.html

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script >
 
$(document).ready(function() {
    $('#navi').load('navi.html');
});


</script>


<link rel="stylesheet" type="text/css" href="css/menu.css">
</head>
<body>


<div id="navi"></div>


</body>
</html>

Navi.html
codice:
<ul id="nav" >
	<li class="current"><a href="home.html">Home</a></li>
	<li><a href="#">Multi-Levels</a>
		<ul>
			<li><a href="#">Team</a>
				<ul>
					<li><a href="#">Sub-Level Item</a></li>
					<li><a href="#">Sub-Level Item</a>
						<ul>
							<li><a href="#">Sub-Level Item</a></li>
							<li><a href="#">Sub-Level Item</a></li>
							<li><a href="#">Sub-Level Item</a></li>
						</ul>
					</li>
					<li><a href="#">Sub-Level Item</a></li>
				</ul>
			</li>
			<li><a href="#">Sales</a></li>
			<li><a href="#">Another Link</a></li>
			<li><a href="#">Department</a>
				<ul>
					<li><a href="#">Sub-Level Item</a></li>
					<li><a href="#">Sub-Level Item</a></li>
					<li><a href="#">Sub-Level Item</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">Contact Us</a></li>
</ul>