Расплывается меню html

Уважаемые господа! Такая проблема: при уменьшении окна расплывается меню. Я понимаю, что при такой верстке это неизбежно, но как можно минимизировать потери, так сказать?
В общем, что я делаю не так?)

    <nav id="menu"> <img src="image/menu.png">
<ul class="top-menu">
    <li><a href="index.html">Главная</a></li>
    <li><a href="price.html">Прайс лист</a></li>
    <li><a href="galery.html">Галерея</a></li>
    <li><a href="">Контакты</a></li>
</ul>
    </nav>

#menu {
    min-width: 300px;
 display:inline;
    font-size: 100%;
}
.top-menu {
max-width: 980px;
list-style:none; 
padding:0; 
margin: -68px 300px ;
z-index: 1000;
position: absolute;
float: left;
}

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

      nav li {
list-style-position: inside;
float:left; 
font: 17px Tahoma;}

      .top-menu li {
display: inline-block;
padding: 10px;
margin: 0;}

      .top-menu a {
color:rgb( 128, 128, 128 ); 
display:block; 
height:40px; 
line-height:2.118; 
padding:0px 10px 0px 10px; 
background:#fbfeff; 
text-decoration:none;   }

     .top-menu a:hover{
border-radius: 5px;
color:#fff; 
background: #bf6469;}