I can not make fluid layout in the menu

Hello.

I have the menu below:

<ul class="menuUlTopo">
  <li class="menuTopo"><a href="principal.php" title="Principal">Principal</a></li>
  <li class="menuTopo"><a href="administradoresMenu.php" title="Administradores">Administradores</a></li>
  <li class="menuTopo"><a href="clientesMenu.php" title="Clientes">Clientes</a></li>
  <li class="menuTopo"><a href="imoveisMenu.php" title="Imóveis">Imóveis</a></li>
  <li class="menuTopo"><a href="tiposMenu.php" title="Tipos de Imóveis">Tipos de Imóveis</a></li>
  <li class="menuTopo"><a href="emails.php?acao=listar" title="E-mails">E-mails</a></li>
</ul>

I would like to make it fluid. But as much as I change the css I can not make the menu items fall below the other when we decrease the size of the screen.

Where am I going wrong?

Here's the css

a, a:hover {
    text-decoration:none;
    color:#FFF;
}

ul {
    list-style-type:none;
    padding:0;
}

ul.menuUlTopo {
    width: 100%;
}

ul li.menuTopo {
    float:left;
    width:161px;
    height:50px;
    text-align:center;
    border-left: #005E9C 1px solid; 
    border-right: #005E9C 1px solid;    
}

ul li.menuTopo a {
    width:161px;
    height:50px;
    display:table-cell;
    vertical-align:middle;  
    color: #FFF;
}

ul li.menuTopo:hover {
    background-color: #CCC;
    color: #FFF;
}

Thanks to anyone who can help