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