I am trying to make my website responsive. I have managed to get the site to display in most mobile browsers but I can't get it to display in tablets like the ipad.

The website displays as it should in landscape mode but in portrait mode the nav bar wraps outside of it's border and the sub menu doesn't work properly

I have resized the nav bar so that it fits in one line and used the following css at the foot of the css file. This file is linked to the html file to make the changes;

Code:
@media only screen and(max-device-width: 950px) and (orientation: portrait)
body { 
    max-width: 60.00em;
    margin: 0 auto;
    padding-bottom: 90px;
    }

#menu ul {
    padding: 4px;
    font-family: Arial,Verdana;
    font-size: 1.00em;
    list-style: none;
    background: #fffff0;
}
}
It seems that safari isn't reading the above code as there no changes in the display.
How do i get tablets to read the above @media script or what changes do I need to make?