problema menu responsive

[tk.6]

Ciao a tutti

chiedo scusa se ho inserito la discussione nella sezione sbagliata.

E' da qualche giorno online la versione "responsive" del mio sito.

Il sito funziona correttamente se viene visualizzato con iphone 3G, samsung 5s, varie versioni di opera, IE, mozilla e chrome.

Il problema sorge quando visualizzo il sito con i tablet (sia con ipad che con samsung tablet).

Se visualizzo il sito con il tablet in mosalità portrait (verticale) il menu resta costantemente aperto.

In altre parole, visualizzando il sito con tale modalità, si dovrebbe visualizzare solo il "div" menù, cliccando il quale il menù si dovrebbe espandere verso il basso. Invece è sempre costantemente aperto.

Qualcuno sa dirmi quale può essere la fonte del problema?

Il sito è questo:

vvv.chimica-online(punto)it

Grazie.

[Tux7000]

Il problema è nella media query

@media screen and (max-width: 750px)

Infatti i tablet tipo iPad3 che ha una risoluzione di 768px vedono il menu esteso normale, mentre i tablet con una risoluzione minore vedono il "toggle" con la scritta Menu.

Soluzione: aumenta il valore di max-width fino a 769px

[gfsolinas]

Ciao a tutti,
premetto che mi sto avvicinando ora al mondo del web, ho un menù responsive funzionante:
<header>
<div class="wrap">
<nav>
<ul id="top-menu">
<li><a href="#home">h</a></li>
<li><a href="#about">a</a></li>
<li><a href="#team">t</a></li>
<li><a href="#services">s</a></li>
<li><a href="#contact">c</a></li>
</ul>
<div id="pull">
<span class="btn">Menu</span>
</div>
</nav>
</div>

Ma vorrei che si chiudesse quando clicco sulle voci della tendina. Ora resta aperto e si chiude solo se clicco su Home (apre e chiude la tendina del menu), questo il css:
/* Responsive styles ========================= */


@media screen and (max-width:1020px) {
.wrap {
width:86%;
}
}
@media screen and (max-width:768px) {
.col1,
.col2,
.col3,
.col4,
.col5 {
width:100%;
float:none;
margin:0 0 20px;
}
}
@media screen and (max-width: 680px) {
header {
height:40px;
}
nav ul {
display: none;
height: auto;
text-align:left;
width:100%;
margin-top:40px;
}
nav ul li {
display: block;
float: none;
width: 100%;
padding-left:10px;
border-bottom:1px solid #008ce5;
background-color:#ffffff;
}
nav ul li:hover {
background-color:#008ce5;
}
nav ul li a {
padding:10px;
line-height:20px;
border:none;
}
nav ul li.active a,
nav ul li a:hover {
border:none;

}
#pull {
display: block;
}
#home {
margin-top:40px;
padding:100px 0;
}
}

Qualcuno riesce a dirmi come modificarlo per cortesia?
Grazie comunque.