Menyn ger konstig layout

När jag har gjort en meny där dropdown menyn hamnar ovanpå sidans innehåll har sidans rubrik flyttat sig åt höger på sidan. Det är som om dropdown menyn tar upp utrymme på sidan.
Varför? Använder mig av visibility:visible;

Hur gör jag för att rubriken inte ska flytta sig?

Har även ett annat problem.
För mobiler vill jag att första delen av menyn ska försvinna, vilken den gör. Men för surfplattor försvinner texten men rutan finns kvar. Jag vill att texten ska synas.
Vad gör jag för fel? :q :q

<div id="nav">
<ul>                               
  <li><a href=annasrader.html><div class="dator">Annas rader</div></a>
  
  </li>
  <li><a href="#">Trädgårdar</a>
  <ul>
  	<li><a href="blekinge.html">Blekinge</a></li>
  	<li><a href="stockholm.html">Stockholm</a></li>
  </ul>
  </li>
  <li><a href="#">Djur</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-->
<div id="content">
	<div id="main">   
		<h1>Maskros</h1>
		
<div id="i">Taraxacum vulgare officinale </div>
</div>
</div>

#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;*/ 
visibility:visible;
}

#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;*/
visibility:hidden;
}

/*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:800px){
#nav{display:block; width:auto;text-align:center;}
#nav li{width:145px;padding-left:2px;padding-right:2px;}
}

@media screen and (max-width:460px){
#header{height:55px;padding:10px;}
#nav {display:block;text-align:left; border:1px;}
#nav a {padding: 0px;}
#nav li{ position:static; display:inline-block; width:100%; vertical-align:top;}
#nav li li a{padding:5px 10px 5px 0; border:1px solid #000; background:green;}
#nav ul li:first-child {display:none;}
#nav ul li ul li:first-child{display:initial;} 
#nav li ul{display:none; }
#nav li:hover ul{display:block;}
}

Tack på förhand!!

Har nu kommit underfund med att mina problem orsakas av att jag någonstans har display:block fast jag inte borde.
Frågan är var?

Håller på att lära mig det här med menyer och har tyvärr inte full koll på vad jag håller på med.
Någon som kan se vad jag gjort för fel?

gissar på att du vill absolut positionera dina sub menyer för att den inte skall hoppa (på dekstop)