CSS Dropdown funktioniert nicht auf IPhone bearbeitet von ChrisF 28.04.2019 09:41 Hallo,ich habe ein Dropdown-Menü nur mit CSS in meiner Homepage aber das funktioniert leider nicht auf meinem Handy.Was muß ich da anders machen? … ~~~ <style> #nav { font-family: "ibm-plex-devanagari", sans-serif ; font-weight: 400 ; font-style: normal ; font-size: 1.6em ; position: static ; width: 420px ; margin: 0 ; margin-top: 0 ; padding: 0 ; display: inline-block ; } ul#navigation { margin: 0.1em ; position: relative ; float: left ; border-left: none ; border-right: none ; } ul#navigation li { display: inline ; font-size: 12px ; font-weight: normal ; margin: 0 ; padding: 0 ; float: None ; position: relative ; border-top: none ; border-bottom: None ; } ul#navigation li a { padding:3px 15px; color:#000000; text-shadow:none; text-decoration:none; display:inline-block; border-right:none; border-left:none; border-top:none; background: none; -webkit-transition:color 0.2s linear, background 0.2s linear; -moz-transition:color 0.2s linear, background 0.2s linear; -o-transition:color 0.2s linear, background 0.2s linear; transition:color 0.2s linear, background 0.2s linear; } ul#navigation li a:hover { background:none; color:none; } ul#navigation li:hover > a { background:none; color: #F6A713 ; } ul#navigation li:hover > ul { /*these 2 styles are very important, being the ones which make the drop-down to appear on hover */ visibility:visible; opacity:1; } ul#navigation ul, ul#navigation ul li ul { list-style: none; margin: 0; padding: 0 ; /*the next 2 styles are very important, being the ones which make the drop-down to stay hidden */ visibility:hidden; opacity:0; position: absolute; z-index: 99999; width:80px; background:none; box-shadow:none; /* css3 transitions for smooth hover effect */ -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; -moz-transition:opacity 0.2s linear, visibility 0.2s linear; -o-transition:opacity 0.2s linear, visibility 0.2s linear; transition:opacity 0.2s linear, visibility 0.2s linear; } ul#navigation ul { top: 24px; left: 22px; } ul#navigation ul li ul { text-align : center ; top: 0; margin-left: -12.3em; /* strong related to width:180px; from above */ } ul#navigation ul li { clear:both; width:100%; border:0 none; border-bottom:none; } ul#navigation ul li a { background:none; padding: 0.5em ; margin-left: 0 ; color:#616161; text-shadow:14px 22px 10px #ffffff; text-decoration:none; display:inline-block; border:0 none; float:left; clear:both; width:150px ; } ...</style> </head> <body> … <nav id="nav"> <ul id="navigation"> <li><a class="rmcloak-stay-invisible" href="#">Arbeiten ⊳</a> <ul> <li><a href="#">2016</a> <ul> <li><a href="#">-</a></li> <li><a href="#">-</a></li> <li><a href="#">März</a></li> <li><a href="#">April</a></li> <li><a href="#">Mai</a></li> <li><a href="#">Juni</a></li> <li><a href="#">Juli</a></li> <li><a href="#">August</a></li> <li><a href="#">September</a></li> <li><a href="#">Oktober</a></li> <li><a href="#">November</a></li> <li><a href="#">Dezember</a></li> </ul></li> <li><a href="#">2017</a> <ul> <li><a href="#">Januar</a></li> <li><a href="#">Februar</a></li> <li><a href="#">März</a></li> <li><a href="#">April</a></li> <li><a href="#">Mai</a></li> <li><a href="#">Juni</a></li> <li><a href="#">Juli</a></li> <li><a href="#">August</a></li> <li><a href="#">September</a></li> <li><a href="#">Oktober</a></li> <li><a href="#">November</a></li> <li><a href="#">Dezember</a></li> </ul></li> <li><a href="#">2018</a> <ul> <li><a href="#">Januar</a></li> <li><a href="#">Februar</a></li> <li><a href="#">März</a></li> <li><a href="#">April</a></li> <li><a href="#">Mai</a></li> <li><a href="#">Juni</a></li> <li><a href="#">Juli</a></li> <li><a href="#">August</a></li> <li><a href="#">September</a></li> <li><a href="#">Oktober</a></li> <li><a href="#">November</a></li> <li><a href="#">Dezember</a></li> </ul> </li> <li><a href="#">2019</a> <ul> <li><a href="#">Januar</a></li> <li><a href="#">Februar</a></li> <li><a href="#">März</a></li> <li><a href="#">April</a></li> <li><a href="#">Mai</a></li> <li><a href="#">Juni</a></li> <li><a href="#">Juli</a></li> <li><a href="#">August</a></li> <li><a href="#">September</a></li> <li><a href="#">Oktober</a></li> <li><a href="#">November</a></li> <li><a href="#">Dezember</a></li> </ul> </li> </li> </ul> </li> <li><a href="mailto:fromhein@gmx.de">Kontakt</a> </li> <li><a href="../OneDrive/Desktop/neu/HTML/Meine Homepage/uebermich.html">Über mich</a></li> </ul> </nav>... ~~~
CSS Dropdown funktioniert nicht auf IPhone bearbeitet von Matthias Apsel 28.04.2019 09:48 Hallo,ich habe ein Dropdown-Menü nur mit CSS in meiner Homepage aber das funktioniert leider nicht auf meinem Handy.Was muß ich da anders machen? … <style> #nav { font-family: "ibm-plex-devanagari", sans-serif ; font-weight: 400 ; font-style: normal ; font-size: 1.6em ; position: static ; width: 420px ; margin: 0 ; margin-top: 0 ; padding: 0 ; display: inline-block ; } ul#navigation { margin: 0.1em ; position: relative ; float: left ; border-left: none ; border-right: none ; } ul#navigation li { display: inline ; font-size: 12px ; font-weight: normal ; margin: 0 ; padding: 0 ; float: None ; position: relative ; border-top: none ; border-bottom: None ; } ul#navigation li a { padding:3px 15px; color:#000000; text-shadow:none; text-decoration:none; display:inline-block; border-right:none; border-left:none; border-top:none; background: none; -webkit-transition:color 0.2s linear, background 0.2s linear; -moz-transition:color 0.2s linear, background 0.2s linear; -o-transition:color 0.2s linear, background 0.2s linear; transition:color 0.2s linear, background 0.2s linear; } ul#navigation li a:hover { background:none; color:none; } ul#navigation li:hover > a { background:none; color: #F6A713 ; } ul#navigation li:hover > ul { /*these 2 styles are very important, being the ones which make the drop-down to appear on hover */ visibility:visible; opacity:1; } ul#navigation ul, ul#navigation ul li ul { list-style: none; margin: 0; padding: 0 ; /*the next 2 styles are very important, being the ones which make the drop-down to stay hidden */ visibility:hidden; opacity:0; position: absolute; z-index: 99999; width:80px; background:none; box-shadow:none; /* css3 transitions for smooth hover effect */ -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; -moz-transition:opacity 0.2s linear, visibility 0.2s linear; -o-transition:opacity 0.2s linear, visibility 0.2s linear; transition:opacity 0.2s linear, visibility 0.2s linear; } ul#navigation ul { top: 24px; left: 22px; } ul#navigation ul li ul { text-align : center ; top: 0; margin-left: -12.3em; /* strong related to width:180px; from above */ } ul#navigation ul li { clear:both; width:100%; border:0 none; border-bottom:none; } ul#navigation ul li a { background:none; padding: 0.5em ; margin-left: 0 ; color:#616161; text-shadow:14px 22px 10px #ffffff; text-decoration:none; display:inline-block; border:0 none; float:left; clear:both; width:150px ; } ...</style> </head> <body> … <nav id="nav"> <ul id="navigation"> <li><a class="rmcloak-stay-invisible" href="#">Arbeiten ⊳</a> <ul> <li><a href="#">2016</a> <ul> <li><a href="#">-</a></li> <li><a href="#">-</a></li> <li><a href="#">März</a></li> <li><a href="#">April</a></li> <li><a href="#">Mai</a></li> <li><a href="#">Juni</a></li> <li><a href="#">Juli</a></li> <li><a href="#">August</a></li> <li><a href="#">September</a></li> <li><a href="#">Oktober</a></li> <li><a href="#">November</a></li> <li><a href="#">Dezember</a></li> </ul></li> <li><a href="#">2017</a> <ul> <li><a href="#">Januar</a></li> <li><a href="#">Februar</a></li> <li><a href="#">März</a></li> <li><a href="#">April</a></li> <li><a href="#">Mai</a></li> <li><a href="#">Juni</a></li> <li><a href="#">Juli</a></li> <li><a href="#">August</a></li> <li><a href="#">September</a></li> <li><a href="#">Oktober</a></li> <li><a href="#">November</a></li> <li><a href="#">Dezember</a></li> </ul></li> <li><a href="#">2018</a> <ul> <li><a href="#">Januar</a></li> <li><a href="#">Februar</a></li> <li><a href="#">März</a></li> <li><a href="#">April</a></li> <li><a href="#">Mai</a></li> <li><a href="#">Juni</a></li> <li><a href="#">Juli</a></li> <li><a href="#">August</a></li> <li><a href="#">September</a></li> <li><a href="#">Oktober</a></li> <li><a href="#">November</a></li> <li><a href="#">Dezember</a></li> </ul> </li> <li><a href="#">2019</a> <ul> <li><a href="#">Januar</a></li> <li><a href="#">Februar</a></li> <li><a href="#">März</a></li> <li><a href="#">April</a></li> <li><a href="#">Mai</a></li> <li><a href="#">Juni</a></li> <li><a href="#">Juli</a></li> <li><a href="#">August</a></li> <li><a href="#">September</a></li> <li><a href="#">Oktober</a></li> <li><a href="#">November</a></li> <li><a href="#">Dezember</a></li> </ul> </li> </li> </ul> </li> <li><a href="mailto:fromhein@gmx.de">Kontakt</a> </li> <li><a href="../OneDrive/Desktop/neu/HTML/Meine Homepage/uebermich.html">Über mich</a></li> </ul> </nav>...
nicht angemeldet
