esconder menu (dropdown) para moviles

[helenp]

Hola,
Tengo un dropdown menu css con hover.
Lo que estoy intentando es hacer que los moviles solo tienen el boton con un enlace a otra pagina donde estan los enlaces del menu. Los pc tienen el hover menu (y tambien el boton con el enlace).
Es decir con dropdown a pc's pero sin a moviles.

Para reconocer moviles y tablets etc. uso @media screen and (max-width: 1023px){ css }
y los pc's @media screen and (min-width: 1024px){ css }

He puesto los ul ul y lis etc, con display:none para la resolucion mas pequeña.
En mi samsung mini funciona perfectamente, pero en el blackberry de mi amiga salen todos los menus abiertos, cubriendo parte de la pantalla.
Me he bajado Adobe device center y algunos moviles van bien pero la mayoría igual que el blackberry,
creo que lo he probado todo, pero no consigo hacerlo funcionar con el device center. Este es el enlace de la prueba, ( no haga click en ventas)
http://www.marbellasunrentals.com/espanol/nosotros_links.htm

No entiendo porque no funciona display:none

Este es la css del menu

Código:

#menu {float:left; margin:0; padding:0 5px 0 5px; width:778px }
#menu ul {list-style: none; margin:0; padding:0; width:108px; float:left;}
#menu ul ul ul .level3{ width: 330px; }
#menu ul ul .level4{ width:240px;}	
#menu ul ul .level5{ width:220px;}	
#menu ul ul .level6{ width:195px;}
#menu ul ul .level7{ width:113px;}					
#menu p {display: block; border: 1px solid; border-color: #ccc #888 #555 #bbb; margin:0; padding:2px 3px; color:#000099; 
text-align:center; background:url("../images/background5.gif"); font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; 
font-weight:bold;}
#menu ul ul .level2{ display:block; border:1px solid; border-color:#ccc #888 #555 #bbb; margin:0; color:#000099; 
background:#FFFFFF; text-align:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; 
padding-left:1px; padding-top:3px; padding-bottom:3px; text-decoration:none; width:250px;}	
#menu a{display:block; border:1px solid; border-color:#ccc #888 #555 #bbb; margin:0; color:#000099; background:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; padding-left:1px; padding-top:3px; 
padding-bottom:3px; text-decoration:none;}
#menu ul ul .level2:hover {color:#000099; background:#FFFF99;}
#menu a:hover {color:#000099; background:#FFFF99;}
#menu li:hover {position:relative; z-index: 500;} 
#menu ul ul {position:absolute;}
#menu ul ul ul {top:-1px; left:100%;}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {display: block;}

Y esto es parte del html:

Código:

<ul>
  <li>
    <p><a class="topmenu" href="indextest.htm">Inicio&nbsp;<img src="new_arrow_down.gif" width="8" height="8" alt="Arrow down" border="0"></a></p>
    <ul>
		<li><a class="links" href="indextest.htm">Página de Inicio</a></li>
    </ul>
  </li>
</ul>
<ul>
  <li>
    <p><a class="topmenu" href="nosotros_links.htm">Nosotros&nbsp;<img src="new_arrow_down.gif" width="8" height="8" alt="Arrow down" border="0"></a></p>
    <ul>
	  <li class="level4"><a class="links" href="libro_de_visitas_2011.htm">Consejos y comentarios de veraneantes</a></li>
      <li class="level4"><a class="links" href="nosotros.htm">Sobre nosotros</a></li>
	  <li class="level4"><a class="links" href="pacos_pros.htm">Pacos Pros, empresa de mantenimiento</a></li>

[kseso?]

Tiene un error en las media queries

@media screen and (max-width: 1023px){ css }
@media screen and (min-width: 1024px){ css }

ahí sólo discrimina entre las screen y aquellos dispositivos que tengan una anchura hasta 1023 y los mayores a ella.
Para los móviles mejor sería utilizar el valor media handheld y max-device-width y si quiere más precisión la orientación: orientation:portrait

Quizás le resulte útil este artículo

[helenp]

Iniciado por kseso?

Tiene un error en las media queries

ahí sólo discrimina entre las screen y aquellos dispositivos que tengan una anchura hasta 1023 y los mayores a ella.
Para los móviles mejor sería utilizar el valor media handheld y max-device-width y si quiere más precisión la orientación: orientation:portrait

Quizás le resulte útil [URL="ksesocss.blogspot.com.es/2012/03/css3-media-queries-un-adivino-de.html"]este artículo[/URL]

Gracias,
Pues yo no sé, eso es lo que me recomendaron en un post, y he leido algun articulo sobre usar eso.
Bueno lo he cambiado y he puesto:
@media screen and (max-device-width: 1023px) {
y en el min para pc he probado tanto uno como el otro,
y obtengo el mismo resultado, en mi samsung mini funciona bien, pero en adobe device center la mayoria enseñan el menu abierto. No tengo el blackberry para poder probar.
Y lo de handheld etc es para usar distintos hojas de css, yo quiero tener solo uno. En fin ni idea.

He probado @media handheld y es lo mismo.

[helenp]

The problem is in the css,
didnt thought about it,
I tried to add a display: none to a hover.....and some devices dont understand hover..

This editing the css in firefox and chrome for pc takes away the dropdown and that was what I was trying to do:
div#menu ul ul ul li:hover ul {display: block;}

Know I am putting display block on all kinds of ul's and li's and still the same.....
what can I do?

[helenp]

Ultimo test, he metido la styly de los botones dentro de
@media screen and (max-width: 1023px) {
y en el min-width tambien y aparece sin estilo en esos mobiles.
asi que hace caso omiso.
En el enlace que me diste puede que se puede poner en una hoja de estilos aparte,
pero yo quiero todo en la misma hoja, y para hacerlo pone que lo haga asi:
@media screen and (max-device-width: 470px) { /* aquí tus estilos para el medio */ }

y eso ya lo he probado y no va tampoco....
Estoy ya loca con esto...