#質問 レスポンシブでメニューバーを切り替えたいのですが、メニューバーの上にスライド画像が乗ってしまい、うまく表示されません。どのように設定したらよいか、どなたか教えて下さい。
どうぞよろしくお願いいたします。

■HTML
<header>
<nav id="menu-box">
<div id="toggle"><a href="">MENU</a></div>
<ul id="menu">
<li><a href="">Navi1</a></li>
<li><a href="">Navi2</a></li>
<li><a href="">Navi3</a></li>
</ul>
</nav>
</header>
<section>
<div id="slideshow">
<div id="">
<h2>
<img id="" src="***.png">
</h2>
</div>
</div>
<script type="text/javascript">
$('div#slideshow').backstretch([
"01.jpg" , "i02.jpg" , "03.jpg" , "04.jpg"
], {duration: 7000, fade: 1000});
</script>
</section>

■CSS
@charset "utf-8";
#menu {
width: 100%;
max-width: 1150px;
margin: 0 auto;
height: 350px;　　←こちらを設定するとモバイルではOKですが、PCだとナビが縦長になってしまいます。
padding: 0;
}

@media only screen and (max-width: 480px) {
#menu {display: none;
}
#menu li {width: 100%;
}
#toggle { display: block;
position: relative;
width: 100%;
}
#toggle a{display: block;
position: relative;
}
}

※CSSを全て記入したいのですが、何故か投稿ボタンが押せないので抜粋しています。