Problema Menu dropdown orizzonate

alessiof86

Utente Attivo
6 Lug 2009
134
0
0
Buongiorno ho realizzato un menu dropdown per un sito a layout fisso tutto funziona alla perfezione tranne quando il sito viene navigato da smarphone Apple. Il problema riscontrato è che cliccando sul punto dove si dovrebbe aprire il sottomenu non succede nulla mentre se la stessa operazione viene eseguita da smartphone android tutto funziona. da cosa può dipendere? Inoltre se si clicca da smartphone Apple su la voce del menu che non contiene il sottomenu viene giustamente aperta la pagina desiderata. Di seguito il css del menu

Codice:
*NAV*/
#nav  {	
	  margin-top:-11px;
	  width: 100%;
	  }
#menu, #menu ul {
        margin: 0;
        padding: 0;
        list-style-type:none;
		color:#777;
}
#menu {
        width: 960px;
        margin: 0px auto;
        border: 0px solid #222;
        background: #da251d; /* Old browsers */
		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RhMjUxZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMTExMTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
		background: -moz-linear-gradient(top,  #da251d 0%, #111111 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#da251d), color-stop(100%,#111111)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #da251d 0%,#111111 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #da251d 0%,#111111 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #da251d 0%,#111111 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #da251d 0%,#111111 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#da251d', endColorstr='#111111',GradientType=0 ); /* IE6-8 */
		-moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
		-m box-shadow: 3px 4px 6px #777777;
        -webkit-box-shadow: 3px 4px 6px #777777;
        box-shadow: 3px 4px 6px #777777;
		/*internet explorer gradient*/
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#DA251D', endColorstr='#111111');
}
#menu:before,
#menu:after {
        content: "";
        display: table;
}

#menu:after {
        clear: both;
}
#menu {
        zoom:1;
		}
#menu li {
        float: left;
        border-right: 0px solid #222;
        -moz-box-shadow: 1px 0 0 #444;
        -webkit-box-shadow: 1px 0 0 #444;
        box-shadow: 1px 0 0 #444;
        position: relative;
}
#menu a {
        float: left;
		padding: 12px 37px;
        color:#FFFFFF;
        text-transform: uppercase;
		font-size: 78%;
        text-decoration: none;
}
#menu li:hover > a {
        color: #F00;
}

*html #menu li a:hover { /* IE6 only */
        color: #FAFA;
		
}
#menu ul {
        margin: 20px 0 0 0;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 38px;
        left: 0;
        z-index: 9999;
        background: #444;
        background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
        background: -webkit-linear-gradient(#444, #111);
        background: -o-linear-gradient(#444, #111);
        background: -ms-linear-gradient(#444, #111);
        background: linear-gradient(#444, #111);
        -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
        -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
}
#menu li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;
}
#menu ul ul {
        top: 0;
        left: 150px;
        margin: 0 0 0 20px;
        _margin: 0; /*IE6 only*/
        -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        box-shadow: -1px 0 0 rgba(255,255,255,.3);
}

#menu ul li {
        float: none;
        display: block;
        border: 0;
        _line-height: 0; /*IE6 only*/
        -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
}
#menu ul a {
        padding: 10px;
        width: 130px;
        _height: 10px; /*IE6 only*/
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
}
#menu ul a:hover {
        background-color: #0186ba;
        background-image: -moz-linear-gradient(#04acec,  #0186ba);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background-image: -webkit-linear-gradient(#04acec, #0186ba);
        background-image: -o-linear-gradient(#04acec, #0186ba);
        background-image: -ms-linear-gradient(#04acec, #0186ba);
        background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
        -moz-border-radius: 3px 3px 0 0;
        -webkit-border-radius: 3px 3px 0 0;
        border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
        content: '';
        position: absolute;
        left: 40px;
        top: -6px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
        left: -6px;
        top: 50%;
        margin-top: -6px;
        border-left: 0;
        border-bottom: 6px solid transparent;
        border-top: 6px solid transparent;
        border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
        border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
        border-right-color: #0299d3;
        border-bottom-color: transparent;
}
#menu ul li:last-child > a {
        -moz-border-radius: 0 0 3px 3px;
        -webkit-border-radius: 0 0 3px 3px;
        border-radius: 0 0 3px 3px;
		
}
 
Discussioni simili
Autore Titolo Forum Risposte Data
L [HTML] bootstrap problema menu dropdown in mobile. HTML e CSS 3
M [HTML] problema spazio aggiuntivo tra elementi <li> di menu a tendina HTML e CSS 1
P [HTML] Problema con menu orizzontale a tendina per sito web HTML e CSS 17
P [Javascript] problema menu responsive su aruba, editor bk Javascript 1
S [HTML] Problema menu a comparsa HTML e CSS 5
asevenx problema visualizzazione menu sovrapposto allo slider WordPress 7
K Problema ancore in pagine diverse con menu fixed HTML e CSS 6
M Problema menu HTML e CSS 8
M Menu e logo responsive problema centramento HTML e CSS 6
L Problema menu php in sito joomla PHP 0
G problema con menu spry dreamweaver Webdesign e Grafica 5
L Problema onClick con un menu a tendina Javascript 3
F Problema sub-menu troppo lungo HTML e CSS 3
asevenx problema barra menu e compatibilità browser WordPress 6
E [Menu JQuery]: problema click quando il sottomenu si apre sopra un iframe... jQuery 0
F Problema con Menu Javascript HTML e CSS 1
F problema menu a tendina con explorer HTML e CSS 2
Dexter_90 [AIUTO!] Problema Inserimento Menu Fireworks nell'Header WordPress 11
B Problema di inserimento "menu con css" in pagina web "con tabelle" HTML e CSS 5
I problema con un menu javascript Javascript 4
T problema con il menu di un blog PHP 3
J Problema con menu a tendina collegato MS Access 0
R Problema posizionamento menu orizzontale in jquery HTML e CSS 11
O problema menu tendina css HTML e CSS 1
F Problema Menu/Div Webdesign e Grafica 9
M Problema Con Menu Javascript Javascript 1
S Problema menu a tendina Flash 1
M problema con hover/visited menu HTML e CSS 2
D Problema menu! Webdesign e Grafica 1
P Problema Con Il Ciclo Di Un Menu' Flash 6
T Problema con tasto e menu' Flash 0
G Problema coi colori di un menu CSS HTML e CSS 3
R Problema con FP 2003: bloccare scorrimento menu HTML e CSS 4
S Problema menu javascript Javascript 2
S Problema menu CSS HTML e CSS 13
T Problema con gestione menu laterale HTML e CSS 6
I Sto progettando nuovi siti utilizzando bootstrap e devo dire funziona bene, l'unico problema e la maschera -moz- HTML e CSS 0
K Problema form update PHP 2
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
S Problema nel ciclare un json Javascript 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
K Problema Inner join PHP 1
F firefox problema http Linux e Software 0
N Problema con position absolute e overflow HTML e CSS 4
E Problema jquery Success jQuery 2
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
E problema selezione sfumata Photoshop 2

Discussioni simili