# CS Dropdown Menu funktioniert nicht richtig auf Applegeräten



## smisonline2 (13. Mai 2013)

Hallo,

das Problem ist folgendes.


Wenn ich dort auf den "test link 0" fahre, öffnet sich das Submenu. Wnen ich jetzt  auf einen Link klicke oder aus dem Menu herausfahre, geht es auf Applegeräten nicht zu oder nur manchmal. Zu 90% bleibt es aber offen, bis man auf einen andere n Link außerhalb dieses Submenus klickt. Danke für Eure Hilfe


http://www.sxrg-energy.com/pre/ttt/


Die css Definition sieht so aus.


```
/* Mainnavigation */
#content_mainnavigation {
	font-size: 14px;
	/*font-weight:bold;*/
	z-index:20000;
	width:100%;
	min-width:770px;
	position:fixed;
	top:0px; 
	margin: 0 auto;
	height:115px;
  

	background-image: url(../images/header_background.png);
	background-repeat:repeat-x;
	background-position: center top; 

	}
	




#navlogo{
	top:10px;
	background-image: url(../images/headerlogo.png);
	background-repeat:no-repeat;
	background-position: center top;
	float:left;
	width:151px;
	min-width:151px;
	max-width:151px;
	height:80px;
	min-height:80px;
	max-height:80px;
	padding:0px;
	margin:0px;
	margin-top:10px;
	margin-left:20px;
	pointer-events: all;
	z-index:50000;
	/*position:fixed;*/
	}
	
	
	
	





#header {
	width:570px;
	min-width:570px;
	float:right;

	margin: 30px auto 0px auto;
	padding:0px;
	height:34px;
	
	background-color: #fff;

	filter: alpha(opacity=90);
	-khtml-opacity: 0.90;     
	-moz-opacity: 0.90;       
	opacity: 0.90;   
	}


#menu {
	padding:0px;
	float:left;
	margin-left:1px;
	}
	
#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;

	}

#menu a {
	/*font-size: 1.0em;*/
	/*font-weight: bold;*/
	text-decoration: none;	
	}

#menu > ul > li > a {
	/*
	-moz-box-shadow: 	2px 2px 2px rgba(0,0,0,0.3);
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
	box-shadow: 		2px 2px 2px rgba(0,0,0,0.3);
	*/
	}
	
/* Top buttons */
#menu > ul > li {
	float: left;
	margin: 0px;
	position: relative;
	padding-bottom:10px;/* important  pulldown */
	}
	
#menu > ul > li > a {
	color: #cb1017;


	line-height: 32px;
	padding:10px;
	text-align:center;
	}
	

		
#menu > ul > li:hover > a {
	color: #ffffff;
	background-color: #cb1017;
	}

#menu > ul > li > a.current{
	color: #ffffff;
	background-color: #cb1017;	
	}

#menu .menu-drop > a.current {

	}

#menu .menu-drop:hover > a.current {
	}
	
#menu .menu-drop > a.current .menu-label {
	background-image: url("../images/revolverslider/drop_arrow.png");
	background-position:right -23px;
	background-repeat:no-repeat;	
	}
	
#menu .menu-drop > a {
	padding-right: 10px;
	}
		
#menu .menu-label {
	background-image: url("../images/revolverslider/drop_arrow.png");
	background-position:right 7px;
	background-repeat:no-repeat;
	-webkit-transition: background 0.1s;
	-moz-transition: background 0.1s;
	-ms-transition: background 0.1s;
	-o-transition: background 0.1s;
	transition: background 0.1s;
	padding-right: 15px;
	}

#menu .menu-drop:hover .menu-label {
	background-position:right -23px;
	-webkit-transition: background 0.1s;
	-moz-transition: background 0.1s;
	-ms-transition: background 0.1s;
	-o-transition: background 0.1s;
	transition: background 0.1s;
	}

#menu .menu-right {
	float: right;
	}
		
		
/* Dropdown */

#menu ul ul {
	min-width:220px;
	width:240px;
	padding: 0px;
	margin: 0px;
	position: absolute;
	top: 40px;
	/*left: -5000px;*/
	left:0px;
	min-width: 100%;
	z-index: 100;
	display:none;

	filter: alpha(opacity=90); /* internet explorer */
	-khtml-opacity: 0.90;      /* khtml, old safari */
	-moz-opacity: 0.90;       /* mozilla, netscape */
	opacity: 0.90;           /* fx, safari, opera */	

	-moz-box-shadow: 	2px 2px 4px rgba(0,0,0,0.3);
	-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	box-shadow: 		2px 2px 4px rgba(0,0,0,0.3);	
	}


#menu li:hover ul {
	/*left: 0;*/
	right:0px;
	display:block;
	border: 2px solid white;
	}

		
/* Dropdown buttons */
#menu ul ul li {
	border-bottom: 1px dotted #c7ff70;
	}

#menu ul ul a {
	background-position:left 7px;
	color: #cb1017;
	background-color: #ffffff;
	padding: 10px 10px 10px 16px;
	display: block;	
	}

#menu ul ul a:hover {
	color: #ffffff;
	background-color: #cb1017;
	}


#menu ul ul .submenudiv {
	background-position:left 7px;
	background-repeat:no-repeat;

	color: #cb1017;
	background-color: #ffffff;
	padding: 10px 10px 10px 16px;
	display: block;	
	cursor: pointer;
	}

#menu ul ul .submenudiv:hover {
	color: #ffffff;
	
	background-color: #cb1017;
	}

#socialinfo {
	float:right;
	margin: 0px;
	padding: 0px;
	margin-top: -12px;
	margin-right: 20px;
	}
```


----------



## Jan-Frederik Stieler (13. Mai 2013)

Hallo,
ich verwende hier auch ein Applegerät (OSX 10.6.8) da funktioniert mit es einwandfrei mit chrome, Safari und Firefox.
Das einzigste was nicht stimmt ist die Auswahl des ersten Levels des Menülinks wenn ich einen Link des Submenüs aktiviere. Normalerweise müsste dann „test link 0“ auch ausgewählt bleiben.

Grüße


----------



## smisonline2 (13. Mai 2013)

Hallo,

also ich habe hier ein "ipad mini" zum testen mit Safari.

Wenn ich also  "test link 0" klicke , öffnet sich das submenu. Wenn ich jetzt auf einen Sublink klicke , bleibt das Menu auf, wenn ich aus dem menu raus fahre , bleibt es auf. Nur wenn ich auf einen anderes topmenueintrag klicke, geht das Pulldown zu. 

Manchmal funktioniert es zwar, aber halt zu 90% nicht. Hast du es mehrfach neu geladen?


----------



## smisonline2 (13. Mai 2013)

Hallo

das ist ein Desktopgerät? Vielleicht hat es auch was mit demmobilen Systemen zu tun?


----------



## Jan-Frederik Stieler (13. Mai 2013)

Hi,
ja habe auch mehrfach neugeladen und es kann am mobilen Safari liegen.
Da kann ich dir aber leider nicht weiterhelfen da ich kein iphone oder ipad besitze und etwsa austesten könnte.

Grüße


----------



## smisonline2 (13. Mai 2013)

na, dann hoffe ich, das sich noch einer mit nem ipad oder iphoen findet


----------



## djheke (13. Mai 2013)

Vielleicht liegt es ja auch am JS, denn im FF Ubuntu funktioniert das Klickverhalten nicht korrekt. Wenn geklickt wird und ein Submenüpunkt angewählt wird, lässt sich test_0 nicht mehr hovern.


----------



## Jan-Frederik Stieler (14. Mai 2013)

Hi,
sorry ich hab falsch getestet. Bei einem Klick bleibt es auch bei mir offen.
Aber nur mal so am Rande hier findest du die Muter aller CSS Dropdownmenüs.
Das sollte eigentlich überall funktionieren.

Grüße


----------



## smisonline2 (17. Mai 2013)

Wen hovern das Problem wäre. Ich aheb jetzt 10 DropDowns aus dem Netz ausprobiert und die haben auf ipads minis alle das gleiche Problem. Die gehen einfach nicht zu . Wenn man die Seiten nicht dynamisch per ajax nachläd, ist es vielleicht noch so halb erträglich, da das Menu ja beim Seitenwechsel eh neu geladen wird und dann zu ist, aber wnen man Daten per Ajax einläd, ist das echt grausam


----------

