嘗試做了RWD的選單,
可是點擊MENU時完全沒有反應....
不知道是少了什麼,請大家幫忙,謝謝~

--------------------------HTML-----------------------------

--------------------------CSS-----------------------------
*{
position:relative;
margin: 0 auto;
box-sizing:border-box;
font-family: sans-serif;
}

.wrapper{
width:100%;
margin: 0 auto;
height: 100%;
}

.back{
position:fixed;
width:100%;
height: 100%;
background-color:#fff;
}

.ball{
display:block;
background-color:#FFD700;
width:880px;
height:880px;
top:-15%;
left:-60%;
border-radius:50%;
opacity:0.5;
}

.ball2{
display:inline-block;
background-color:#FF8099;
width:700px;
height:700px;
position:fixed;
top:50%;
left:75%;
border-radius:50%;
opacity:0.5;
}

.ball3{
display:inline-block;
background-color:#73E68C;
width:650px;
height:650px;
position:fixed;
top:90%;
left:50%;
border-radius:50%;
opacity:0.7;
}

.ball4{
background-color:#5686BF;
width:550px;
height:550px;
position:fixed;
top:60%;
left:-30%;
border-radius:50%;
opacity:0.3;

}

.navbar{
border:5px solid #CD5C5C;
width:100%;
height:80px;
position:fixed;
padding-top:0;
top:0;
left:0;
box-shadow:1px 1px 10px #000;

}
.menu{
float:right;
border:5px solid #000;

}
.menu li{
float:right;
width:120px;
list-style-type:none;
height:210px;
padding-top:10px;
border:5px solid #CD5C5C;
}

.menu li a {
border:3px solid #00CED1;
display:block;
height:30px;
width: 100px;
text-align: center;
text-decoration:none;
font-family:arial;
color:#fff;
text-shadow:0.05em 0.03em 0.15em #000;
transition: transform 0.2s ;
font-size:18px;
margin:0 auto;
}

.menu li a:hover {
transform: scale(1.3);
}

.content{
padding: 10px;
line-height: 1.8;
}

.content p{
margin-bottom: 5px;
}

.showmenu{
display: none;
}

@media (max-width: 767px){
.menu {
max-height: 10px;
overflow: hidden;
transition: max-height 1s;
margin-top: 10px;
position: absolute;
z-index: 100;
top: 81px;
left: 0;
right: 0;
background: #0F222B;
}

.menu li{
float: none;
border-bottom: 1px dashed #69CA62;
}

.menu li a{
transition: all 0.3s;
}

.menu li a:hover{
background: #69CA62;
color: #fff;
}

.showmenu{
font-size:25px;
color:#000;
text-decoration:none;
display: block;
float: right;
margin-right:20px;
margin-top:20px;
}

.menu-show .menu{
max-height: 500px;

}

--------------------------JS-----------------------------
$(document).ready(function() {
$('.showmenu').on('click', function(e){
e.preventDefault();
$('body').toggleClass('menu-show');
});
});