ChrisF: CSS Dropdown funktioniert nicht auf IPhone

Beitrag lesen

SELF-Forum

CSS Dropdown funktioniert nicht auf IPhone

ChrisF (Versionen)
– Informationen zu den Bewertungsregeln

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 &RightTriangle;</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>...
Beitrag melden
–
Informationen zu den Bewertungsregeln