Quebra de linha no Menu Superior

Olá,
Como deixar o menu superior com quebra de linha?

O código do meu menu:

/* Centralizar os itens do menu - OK*/
#cabecalho > .conteiner > .menu.superior { text-align: center; }
#cabecalho > .conteiner > .menu.superior .nivel-um > li { float: none; display: inline-block; border-left: 1; margin-right: -3px;}

/* Cor do fundo e texto do menu - OK */
#cabecalho > .conteiner > .menu.superior, #cabecalho > .conteiner > .menu.superior .com-filho > a i { background-color: #0f9038; }
#cabecalho > .conteiner > .menu.superior .titulo { color: #FFFFFF; }

/* Tamanho da fonte do menu - OK */
.menu li { padding: 0px 10px; }
.menu .titulo { font-size: 12px; text-transform: uppercase; }
.menu .titulo { font-weight: bold;}

Segue o exemplo abaixo:
Sem título

Obrigada

Para fazer a quebra de linha é o código abaixo:

/* Centralizar os itens do menu - OK*/
#cabecalho > .conteiner > .menu.superior { text-align: center;}
#cabecalho > .conteiner > .menu.superior .nivel-um > li { float: none; display: table-cell; border-left: 1;width: 90px; }

O item width: 90px deve alterado para mais ou menos px. Vai testando de acordo com seu site.