@media for dropdown menu

[helenp]

Hi,
I am trying to serve the hover dropdown menu without the dropdown for mobiles and tablets, and I am trying to do it using @media.
What I want is to display only the buttons with a link to a new page for mobiles and tablets with resolucion lower than 1023. But I want the menu with its dropdown served for normal pcs, higher than 1024.

The menu works perfect in my samsung mini, however with
blackberry the menus are all open when entering page. Also with Adobe device center most of the mobiles have the menu open

Well this is what I got so far,
the css for the menu:

@media screen and (max-width: 1023px){
#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: none;} 
}
#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 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 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 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 a.links{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 a.topmenu{text-decoration:none;}
#menu a.topmenu:hover {color:#000099; text-decoration:none;}
#menu ul ul .level2:hover {color:#000099; background:#FFFF99;}
#menu a.links:hover {color:#000099; background:#FFFF99;}
#menu li:hover {position:relative; z-index: 500;} 
#menu ul ul {position:absolute;}
@media screen and (min-width: 1024px){
#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;} }

And a small part of the html:

<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>

Any ideas?
Thanks,

[helenp]

Dont get it, I did it correct but some mobile dont apply the rule,
editing the css in the brower, only changing this part make the dropdown menu not to display, only the buttons with its link:
@media screen and (min-width: 1024px){
#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;} }
Changing the last line to display:none takes away the dropdown, but how to add this to screentouches, such as mobiles, tablets etc?
Thanks,

[helenp]

wow, how stupid I am,
some devices dont understand hover, and what I am putting display none is on a hover....

Here I added the ul ul and ul ul ul and ul ul li
without the hover and it still does not work as per adobe advice central....any ideas:
div#menu ul ul {display:none;}
#menu ul ul {display:none;}
#menu ul ul li {display:none;}
#menu ul ul ul {top:-1px; left:100%; display:none;}
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:none;}

[helenp]

I added the style for the toplevel into @meda screen both for pc and touchscreens, and the toplevel appeared without any style on the problem mobiles...blackberry, some iphones and many others, except my dear samsung mini :)

So they does not read this:
@media screen and (max-width: 1023px) { style }

What can I do? Dont want to have separat style sheets.