Menu desaparece ao se aproximar de uma imagem

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;