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
M Problema con Try Catch PHP 0
C problema seo + cerco esperto SEO e Posizionamento 1
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
I PROBLEMA: Sostituzione sito XAMPP E-Commerce 0
T problema data 30/11/-1 PHP 0

Discussioni simili