It's probably a clumsy way to do it but I have built a responsive website which is also my first attempt at programming a site.
At the moment I have a nav bar that should adapt to tablet or pc sized screens but it doesn't adapt for the ipad. I am using css media queries. the css code is
Code:
@media screen and (min-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width: 768px) and (max-device-width: 999px){*
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;
}
}
In the html file I have the following viewport link
Code:
<meta name="viewport" content="width=device-width, initial-scale=1">
The @media query is at the foot of my css file for the index.html file.

At the moment the nav bar in the ipad wraps outside of the nav bar frame and you can't click on the sub menu as it disapears when you rolll over it.
What do I need to do to get the menu to display correctly in an ipad.

To get around the wrap around I reduced the font size 1.00em which works when i change it in the main body of the css file.

What changes do I need to amke to get the @media query to work?