Menus and mobile sites
This is more a CSS question I think. I solved this problem already for various sites using another menu block, with its own css markup, or using a jump menu.

Using media queries you will have to set the threshold on where to break:

@media all and (max-width: 370px) {
    .default-menu-region {
        display:none;
    }
    .mobile-menu {
        display:block;
    }
}

@media all and (min-width: 371px) {
    .mobile-menu {
        display:none;
    }
}


Adaptive theme provides files for those media queries already, you can just drop your custom content in there instead of writing new media queries like in this example.