Horisontella menyer Css

hej!
Jag håller på med ett litet projekt. Jag vill att min webbsida ska ha en horisontell meny i nederkant av headern. Jag har lyckats få dit en meny som ser ut som jag vill - problemet är bara att när jag minskar sidfönstret så försvinner menyn under "main/content". Jag har försökt med olika typer av positionering på headern respektive menyn, men inget hjälper... Har någon en idé om vad jag kan göra?
// Linda

Htm:
<div id="header">
<h1> Rubrik</h1>

<div id="menycontainer">
<ul>
<li><a href="#">underrubrik 1</a></li>
<li><a href="#" id="current">Underrubrik 2</a></li>
<li><a href="#">underrubrik3</a></li>
<li><a href="#">underrubrik4</a></li>
<li><a href="#">underrubrik5</a></li>
</ul>
</div>
</div>

css:
#header {
position: absolute;
width: 100%;
height: 16%;
background: #D36832;
color: #FFF;
left: 0;
}

#menycontainer ul {
float: left;
margin-left: 0;
padding-left: 21%;
}

#menycontainer li {
display: inline;
margin: 0px;
padding: 0px;
}

#menycontainer ul a {
float: left;
text-decoration: none;
background: #CC9999;
margin-right: 0.5em;
padding: 0.3em 2em;
}

#menycontainer a:link {
color: #ffffff;
}

#menycontainer a:visited {
color: #ffffff;
}

#menycontainer a:hover {
background: #996666;
}

#menycontainer a#current {
background: #FFCC66;
color: #000000;
}