Hjälp med en responsiv meny

Hej!

Jag håller på med en responsiv meny gjord med endast HTML5 och CSS3.

Nu lyckas jag inte göra så att den fungerar som jag vill.

Jag skulle vilja att den för mobiler är max 460px bred och att första knappen i menyn försvinner just för mobiler.

Nu är menyn för smal för mobilerna och översta knappen är endast en knapp utan text.

Hur går jag tillväga för att den ska uppföra sig som jag vill?

Tack på förhand!

<div id="nav">                     
<ul>                               
  <li><a href=annasrader.html><div class="dator">Annas rader</div></a>
  
  </li>
  <li><a href="#">Trädgårdar<span class="caret"></span></a>
  <ul>
  	<li><a href="blekinge.html">Blekinge</a></li>
  	<li><a href="stockholm.html">Stockholm</a></li>
  </ul>
  </li>
  <li><a href="#">Djur<span class="caret"></span></a>
  <ul>
  	<li><a href="sniglar.html">Sniglar</a></li>
  	<li><a href="getingar.html">Bi,geting,humla</a></li>
  </ul>
  </li>
  <li><a href=ogras.html>Ogräs</a>
  </li>
  <li><a href=sjukdomar.html>Sjukdomar</a>
  </li>
 </ul>   
</div> <!--nav-->

#nav{
position:relative;
border: 1px solid #98FB98;
font:bold 16px sans-serif;
display:block;
margin:0px auto;
height:56px;
width:100%;
padding-bottom:4px;
}

#nav li:hover ul{
display:block;
}

#nav ul{
margin: 0;
padding:0;
}

#nav li{
float:left;
display:inline-block;
margin-right:1px;
}

/*Hur meny länkarna ska se ut*/
#nav li a{
text-decoration:none;
display:block;
color:#000;
border: 1px solid #ffffff;
padding:10px 10px;
min-width:150px;
height:35px;
text-align:center;
line-height:50px;
background:#98FB98;
}

/*Hover för menyn*/
#nav li:hover a{
 background:#98FB98;
}

/*Hur länkarna i dropdown menyn ska se ut*/
#nav li:hover ul a{
background:#97EC97;
color:#2f3036;
height:40px;
line-height:40px;
}

#nav li:hover ul a:hover{
background:#98FB98;
color:#fff;
}

/*Gömmer menyn tills den behövs*/
#nav li ul{
display:none;
}

/*Gör menyn vertikal*/
#nav li ul li{
display:block;
float:none;
}

#nav ul ul li{
border: 1px solid #654372;
width:100%;
}

#nav ul ul li a{
border-right:none;
}

#nav li ul li a{
width:auto;
min-width:100px;
padding:0 20px;
}

#nav ul li a:hover + .hidden,.hidden:hover{
display:block;
}

@media screen and (max-width:460px){
#nav {display:block;text-align:left; border:1px;max-width:460px;}
#nav a {padding: 0px;}
#nav li{ position:static; display:inline-block; vertical-align:top;}
#nav li li a{padding:5px 10px 5px 0; border:1px solid #000; background:green;}