Menu desaparece ao se aproximar de uma imagem

[Arcashaid Espert 1]

Quando eu diminuo o meu menu os links usados para ele desaparecem quando chegam perto da imagem, algum sabe como resolver isso ?

 

Abaixo o link mostrando o que acontece,

 

Edite: Existe algum método de definir um limite máximo que o usuário pode redimensionar a pagina ?

 

 

https://www.youtube.com/watch?v=csiHvnda2Cg&feature=youtu.be

 

 

 

código usado

		<div id="cabeçalho">	
			<img id="imgmenu" src="img/novoLogo.png" title="A Guilda" alt="html5" height=""> <!-- imagem do logo do menu -->
			
			
				<ul id="menu"> 
					<li><a style="color: blue;border-bottom:1px solid #EA0000; " href="#"> Inicio</a></li> 
					<li><a href="#">A Empresa</a></li> 
					<li><a href="#">Equipe</a></li> 
					<li><a href="#">Contato</a></li> 
					<li><a href="#">FAQ</a></li> 
				</ul>
		</div>

#cabeçalho{	
width: 100%; 
height:150px; 
float:left;	

}

#imgmenu{
float:left;
margin-left: 10%;	
width: 25%; 
height:150px; 	
background:gray;
}


#menu {
height:50%;
float:right;	
padding-top: 50px;
margin-right: 10%;
}

#menu li{
list-style-type: none;
display: inline; 
font-family: "comic sans ms";
font-size: 18px;
}	
	
#menu  li a {
margin: 2px 18px; 
color: #333;
text-decoration: none;
float:left; 


}

#menu  li a:hover {
background-color:#D6D6D6;
color: #6D6D6D;
border-bottom:3px solid #EA0000;

[Arcashaid Espert 1]

Eu consegui resolver utilizando o position:absolute; Ficou ate bom, mas tive que editar todas as divs e isso possivelmente vai dar trabalho caso tenha que editar uma delas, então se tiver uma forma melhor seria uma grande ajuda