particleground をプラグインしたのですがリンクが押せません。どなたか教えてください。

particlegroundをプラグインしたらナビゲーションが押せずz-indexの配置場所と数値がわかりません。どなたか詳しい方、教えてください。
htmlは

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="," />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3" />
		<meta name="msapplication-TileImage" content="./msapplication-TileImage.png" />
		<meta name="msapplication-TileColor" content="#fff" />
		<!--[if IE]><meta http-equiv="Imagetoolbar" content="no" /><![endif]-->
		<title></title>
	
		<link rel="stylesheet" type="text/css" media="screen and (min-width:1024px)" href="./css/screen_pc.css" />
		
		<link rel="icon" type="image/vnd.microsoft.icon" href="./favicon.ico" />
		<link href='https://fonts.googleapis.com/css?family=Ultra' rel='stylesheet' type='text/css' />
		<link rel="stylesheet" type="text/css" href="css/default.css">
		<link rel="stylesheet" type="text/css" href="css/component.css">

		<script src="jquery/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.particleground.min.js"></script>

		<script src="js/jquery.dlmenu.js"></script>
<script type="text/javascript">
$(function(){
	$('.particales').particleground({ //要素の指定
		dotColor:  '#ffffff',    //ドットの色
		lineColor: '#ffffff',        //線の色
		particleRadius: 5            //ドットのサイズ
	});
	$( '#dl-menu' ).dlmenu();
  $("#toggle").click(function(){
    $("#menu").slideToggle();
    return false;
  });
  $(window).resize(function(){
    var win = $(window).width();
    var p =660;
    if(win > p){
      $("#menu").show();
    } else {
      $("#menu").hide();
    }
  });
	var win = $(window).width();
    var p = 660;
    if(win < p)$(function(){
		$("#menu li a").click(function(){
			$("#menu").hide();
		});
	});
});
</script>
			<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
		<!--[if lte IE 8]>
		<script type="text/javascript" src="./lib/html5/html5shiv-printshiv.js"></script>
		<script type="text/javascript" src="./lib/html5/css3-mediaqueries.js"></script>
		<link rel="stylesheet" type="text/css" hr<a href = "index.html"></a>ef="./css/ie8.css" media="screen" />
	<![endif]-->
		


	</head>
	
	<body>
	
	
		<div id="layout_area" class="particales">
		
		
			
		<header id="header_area">
	
		<div id="logo_area">
					<!--<img src="./img/logo.png" alt="logo" width="80" height="103" />-->
		</div>
				<div id="title_area">
					<h1>タイトル</h1>
				</div>	
		<nav id="menu-box">
<div id="toggle"><a href="#">MENU</a></div>
	<ul id="menu">
							<li><a href="./index.html"/>HOME</a></li>
							<li><a href="./index.html"/>HOME</a></li>
							<li><a href="./index.html"/>HOME</a></li>
							<li><li><a href="./index.html"/>HOME</a></li>
							<li><a 
							<li><a href="./index.html"/>HOME</a></li>
	</ul>
</nav>
		
			</header>
			
			<div id="home_right_area">
					<img src="./img/tamako02_icn.png"  alt="tamago"/>
			</div>
			<footer id="footer_area">
				<small>&copy 2017 ALL RIGHTS RESERVED</small>
				<div id="place00">
					
				</div>
			</footer>
			
		</div>
		

		
		
		
		
		
		
		
		


	</body>
</html>

以上htmlに記述

cssは

```ここに言語を入力
.pg-canvas {
position:fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
z-index:0;

}
/* TEMPLATE +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Retina parts */
@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:1.5dppx){

}
/* TEMPLATE Retina parts end*/



/* INTERFACE */
body{
-webkit-text-size-adjust:100%;
background-color:white;
margin:0px;
padding:0px;
font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;

}
.pg-canvas {
position:fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
z-index:0;

}
#layout_area{
max-width:1680px;
background-image:url("../img/main_004.jpg");
background-repeat:no-repeat;
background-position:center-top;
background-size:cover;
height:100%;
margin:0 auto;




}

#header_area{}

#logo_area{
padding:10px 10px;

}

#title_area{
text-align:center;
margin-top:0px;




}

#sub_title_area{
text-align:center;
margin-top:-40px;


}




#sub{
font-size:16px;
text-align:center;

}


#home_right_area {
text-align:right;
margin:100px 120px 0 0;
display:block;



}



#menu {
width: 100%;
max-width:1680px;
margin:0 auto;
padding:0;
display:block;


}
#menu li{
display:block;
float: left;
width: 16.6666667%;
margin: 0;
padding:0;

}
#menu li a {
display: block;
padding:0 20px 0 20px;
background-color:;
color:white;
text-align: center;
text-decoration: none;
border-right:1px solid #4baacb;

}
#menu li:last-child a{
border: none;
}
#menu li a:link{
color:white;
}
#menu li a:hover{
color:blueviolet;
}
#toggle {
display: none;
}

です。
.bg-canvasがparticlegroundというjqeryです
よろしくお願いします。

kei344

2017/03/19 13:19

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、プラグイン／ライブラリは似た名前のものもあるため、取得した場所のURLを質問文に追記ください。（URLにはリンクを張ることができます）