|
|||
Problem mit PullDown Menu auf ipad/iphone
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 anderen Link außerhalb dieses Submenus klickt. Danke für Eure Hilfe azzitest Die css Definition sieht so aus. HTML-Code:
/* 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; } |
Sponsored Links |
|
|||
Teillösung mit jquery
Hallo,
habe es mit jquery so gelöst, aber das Problem 1. Es ist nicht flexibel. Für jedes weitere Submenu, muss ich ein weiteren Eintrag coden 2. Es reagiert nicht auf onmouseout. Also es geht nru zu, wenn man auf einen Sublink klickt Jemand vielleicht eine bessere idee? $("#menu ul li ul a").click(function () { $(".submenu1").css("display","none"); }); $(".subclick1").click(function () { $(".submenu1").css("display","block"); }); |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Dropdown-Menü funktioniert nicht im IE | Nela | CSS | 0 | 18.12.2012 16:45 |
Vertikales Menü: Submenüs und Richtung des Aufklappens | thomaspruess | CSS | 6 | 15.09.2011 16:38 |
Problem mit ie (menu liste) | Indyk | CSS | 3 | 10.04.2006 13:56 |
unlösbares CSS-Problem? | Georg | CSS | 19 | 29.03.2006 10:30 |
CSS | Problem mit dem IE | Shadow | CSS | 1 | 07.05.2005 18:51 |