Ich habe ein Dropdown-Menü erstellt, welches auch auf allen von mir getesteten Browsern funktioniert ( Firefox, Chrome, Edge, Opera, Vivaldi, Tor). Nun bekam ich die Rückmeldung: Funzt NICHT auf Safari. Habe mir die URALT Version von Safari für Windows heruntergeladen; Das Ergebnis ist katastrophal null Reaktion auf Auswahl!
Habe den Quelltext aus dem Internet und nur meinen Bedürfnissen angepasst.
css
#menu,#menu ul{list-style:none;padding:0;}
#menu li{margin:5px 10px;}
#menu a{text-decoration:none;outline:none;display:block;color:#777;padding:5px 14px}
#menu a:hover,#menu a:focus{color:black; background:orange;}
#menu .hider{overflow:hidden}
#menu .sub ul{margin-top:-200%;transition:.5s;-webkit-transition:.5s}
#menu .sub a:focus ~ .hider > ul,#menu ul:hover{margin-top:0;}
ul {
max-width: 12em;
}
ul ul {
max-width: 12em;
border: 2px solid orange;
}
ul ul ul{
max-width: 12em;
border: 2px solid green;
}
//ul ul ul:hover {background-color:white;}
ul ul li {
background-color: Gainsboro;
margin: 2px;
z-index:1;
}
php
<ul id="menu">
<li class="sub"><a href="#">Select Order by</a>
<div class="hider">
<ul>
<li><a href="image_1.php";>Listing</a></li>
<li><a href="image_self.php";>Own Selection</a></li>
<li class="sub"><a href="#">Inventory No.</a>
<div class="hider">
<ul>
<li><a href="image_2.php";>Numerical</a></li>
<li><a href="image_from.php">from - to</a></li>
</ul>
</div>
</li>
<li class="sub"><a href="#">Title</a>
<div class="hider">
<ul>
<li><a href="image_2.php?order=Title">Alphabetical</a></li>
<li><a href="title_from.php">Letter Selection</a></li>
</ul>
</div>
</li>
<li class="sub"><a href="#">Art Typ</a>
<div class="hider">
<ul>
<li><a href="image_2.php?order=ArtTyp">Alphabetical</a></li>
<li><a href="art_from.php">Selected</a></li>
</ul>
</div>
</li>
<li class="sub"><a href="#">Art Series</a>
<div class="hider">
<ul>
<li><a href="image_2.php?order=Category">Alphabetical</a></li>
<li><a href="cat_from.php">Selected<br>Search in all Entries</a></li>
<li><a href="series_from.php"> Selected<br>Search in Art Series Menu<a><li>
</ul>
</div>
</li>
<li class="sub"><a href="#">Media</a>
<div class="hider">
<ul>
<li><a href="image_2.php?order=Medium">Alphabetical</a></li>
<li><a href="media_from.php">Selected</a></li>
</ul>
</div>
</li>
<li class="sub"><a href="#">Dimension</a>
<div class="hider">
<ul>
<li><a href="dim_from.php?dim=height">height<br>from - to</a></li>
<li><a href="dim_from.php?dim=width">width<br>from - to</a></li>
</ul>
</div>
</li>
<li class="sub"><a href="#">Exhibition</a>
<div class="hider">
<ul>
<li><a href="exhibition.php?Time=now">Currently on Display</a></li>
<li><a href="exhibition.php?Time=all">All Artworks<br>Order by Exhibitors</a></li>
<li><a href="aussteller.php">Selected<br>by Exhibitor</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="sub"><a href="#">Image Info</a>
<div class="hider">
<ul>
<li><a href="image_info.php">all</a></li>
<li><a href="image_infrom.php">from - to</a></li>
</ul>
</div>
</li>
</ul>
Was muss ich wie ändern oder ergänzen damit es auch auf dem iMac / Safari läuft? Wie oben gesagt alle anderen Browser einwandfrei!