Accordion Nav Bar Not Responsive for Mobile Devices - html

Question

I was able to do the Accordion Nav bar to respond on laptop/desktop when a certain size has meant. However, it doesn't respond for any mobile devices. Another issue that I am having is it is not displaying the icon for the Accordion Menu bar for either desktop and mobile devices. Any help would be appreciated to resolve the issue I am having.
Thank you
Responsive CSS:
/*This is the placeholder for responsive CSS that we will implement for mobile design*/
/* Smartphones ----------- */
#media screen and (min-width : 240px) and (max-width: 519px){
/* Styles */
#content{
float:none;
padding:0;
width: auto;
}
img{
max-width: 100%;
height: auto;
width:auto\9; /*for ie8*/
}
body{
float:left;
font-family: 'Fabrica';
}
#logo {
margin-right:auto;
max-width: 100%;
height: auto;
padding: 0;
}
#wrapper{
margin: 0 auto;
}
#wrapper p{
text-indent: 0;
}
h1, h2, h3 {
font-family: 'Fabrica';
}
nav{
position: relative;
min-height: 40px;
}
nav ul{
position:absolute;
width: 180px;
padding: 5px,0;
top: 0;
left: 0;
border: solid 1px #aaa;
background: #fff url(.../img/menu-bar-mobile.jpg) no-repeat 10px 11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
nav ul:hover li{
display: block;
margin: 0 0 5px;
}
nav a:hover {
display:block;
}
nav li{
display:none;
margin:none;
}
#banner{
display: none;
}
footer{
font-family: 'Fabrica';
float:left;
}
}