Hallo zusammen,
auf einer Webseite habe ich ein Menü programmiert. Bei kleinem Display ist es ein Dropdown-Menü. Unter Android wie Windows geht es (öffnet sich bei Mouseover), unter iOS öffnet es sich bei Mouseover nicht. Versteht jemand, warum? Wo ist der Fehler?
HTML ist:
Code
<div class="navigation">
<div class="flex-navigation">
<div><img src="pics/logo_k.png" alt="Ferienwohnung 'Gute Laune'" height="40px"></div>
<div class="big-screen">
<a class="textlink" href="index.html">HOME</a> |
<a class="textlink" href="ausstattung.html">AUSSTATTUNG</a> |
<a class="textlink" href="preise.html">PREISE</a> |
<a class="textlink" href="kontakt.html">KONTAKT</a>
</div>
<div class="small-screen"><div id="menu"><ul><li>
<h2 class="textlink">MENÜ</h2>
<ul>
<li><a class="textlink" style="background: #ffffff; display: block; width: 80px; border: 1px; padding: 2px;" href="index.html">HOME</a></li>
<li><a class="textlink" style="background: #ffffff; display: block; width: 80px; border: 1px; padding: 2px;" href="ausstattung.html">AUSSTATTUNG</a></li>
<li><a class="textlink" style="background: #ffffff; display: block; width: 80px; border: 1px; padding: 2px;" href="preise.html">PREISE</a></li>
<li><a class="textlink" style="background: #ffffff; display: block; width: 80px; border: 1px; padding: 2px;" href="kontakt.html">KONTAKT</a></li>
</ul>
</li></ul></div>
<div style="clear: both;"></div>
</div>
</div>
</div>
Alles anzeigen
In der CSS-Datei habe ich hierfür:
Code
@media (max-width: 750px)
{
.big-screen
{
display: none;
}
}
@media (min-width: 751px)
{
.small-screen
{
display: none;
}
}
.navigation {
position: fixed;
font-size: 20px;
top: 0;
left: 0;
right: 0;
Background-color: #ffffff;
opacity: 0.9;
filter: alpha(opacity=90);
}
#menu {
width: 100%;
padding: 0 10px;
background: none;
font-size: 0.5em;
line-height: 1.2;
float: right;
}
#menu ul {
float: left;
width: 100px;
list-style-type: none;
background: #ffffff;
}
#menu li {
position: relative;
}
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
#menu ul li:hover ul {
display: block;
}
*html #body {behavior: url(csshover3-source.htc); font-size: 100%;}
*html #menu ul li a {height: 1%;}
Alles anzeigen
Danke für eure Hilfe!!!
BG Colin