slick導入後メニューバーを追従型にしたら画像部分が上に被ってしまう。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>サンプル</title>
6<link rel="stylesheet" type="text/css" href="css/index.css">
7<link rel="stylesheet" type="text/css" href="slick/slick.css" media="screen" />
8<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" media="screen" />
9<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
10</head>
11
12<body>
13
14  <div id="header"></div>
15
16  <div id="navi">
17    <ul id="menu">
18      <li><a href="index.css">TOP PAGE<span class="submenu">トップページ</span></a></li>
19      <li><a href="">◆◇◆<span class="submenu">◆◇◆</span></a></li>
20      <li><a href="">◆◇◆<span class="submenu">◆◇◆</span></a></li>
21      <li><a href="">◆◇◆<span class="submenu">◆◇◆</span></a></li>
22      <li><a href="">◆◇◆<span class="submenu">◆◇◆</span></a></li>
23      <li><a href="">◆◇◆<span class="submenu">◆◇◆</span></a></li>
24      <li><a href="">◆◇◆<span class="submenu">◆◇◆</span></a></li>
25    </ul>
26  </div>
27
28
29<div id="sliderbox">
30  <div id="bannerslider">
31    <ul class="slider">
32        <li><a href="#"><img src="images/slider1.jpg" alt="image01"></a></li>
33        <li><a href="#"><img src="images/slider2.jpg" alt="image02"></a></li>
34        <li><a href="#"><img src="images/slider3.jpg" alt="image03"></a></li>
35        <li><a href="#"><img src="images/slider4.jpg" alt="image04"></a></li>
36    </ul>
37  </div>
38</div>
39
40<div id="mainbox">
41<br>
42<br>
43<br>
44<br>
45<br>
46<br>
47<br>
48<br>
49<br>
50<br>
51<br>
52<br>
53<br>
54<br>
55<br>
56<br>
57<br>
58<br>
59<br>
60<br>
61<br>
62<br>
63<br>
64<br>
65<br>
66<br>
67<br>
68<br>
69<br>
70<br>
71<br>
72<br>
73<br>
74<br>
75<br>
76<br>
77<br>
78<br>
79<br>
80<br>
81<br>
82<br>
83<br>
84<br>
85<br>
86  <div id="main">
87    <div id="news"></div>
88    <div id="pickup"></div>
89    <div id="todaycast"></div>
90    <div id="ranking"></div>
91  </div>
92
93  <div id="sidebar">
94    <div id="newface"></div>
95    <div id="diary"></div>
96    <div id="merumaga"></div>
97    <div id="banner"></div>
98  </div>
99
100</div>
101
102  <script src="slick/slick.min.js"></script>
103  <script src="js/main.js"></script>
104
105</body>
106</html>

css
1body{
2  margin: 0;
3  font-family: "游明朝", "Yu Mincho",serif;
4	background-image: url("../images/bgimg.jpg");
5  background-repeat: no-repeat;
6  background-attachment: fixed;
7}
8
9a{
10	text-decoration: none;
11	color:#000;
12}
13
14
15#navi{
16	width:100%;
17  background: rgb(255,255,255); /* Old browsers */
18  border-top: 1px solid #ddd;
19  border-bottom:1px solid #ddd;
20  position: sticky;
21  top:0;
22}
23
24#menu{
25	width: 1200px;
26	padding: 0;
27	margin: 0 auto;
28	list-style-type: none;
29}
30
31#menu li{
32	width: 13.9%;
33	font-size: 16px;
34	padding: 5px 0px;;
35	text-align: center;
36	display: inline-block;
37}
38
39.submenu{
40  font-size: 13px;
41  display: block;
42}
43
44/*------- スライダー -------*/
45
46#sliderbox{
47  width: 100%;
48}
49
50#bannerslider{
51  width: 1200px;
52  margin: 0 auto;
53  padding: 0;
54  background-color: rgba(255, 255, 255, 0.6);
55}
56
57.slider{
58	padding: 0;
59}
60
61.slider .slick-slide:not(.slick-center) {
62  -webkit-filter: grayscale(100%) opacity(70%);
63  -moz-filter: grayscale(100%) opacity(70%);
64  -o-filter: grayscale(100%) opacity(70%);
65  -ms-filter: grayscale(100%) opacity(70%);
66  filter: grayscale(100%) opacity(70%);
67  transition: 0.2s linear;
68}

js
1$('.slider').slick({
2centerMode: true,
3centerPadding: '245px',
4autoplay:true,
5autoplaySpeed: 8000,
6dots:false,
7focusOnSelect:true,
8speed:800,
9});