moin,
vielleicht kann mir hier einer einen Tipp geben.
Ich habe mich in den letzten 1,5 Jahren ein wenig in HTML und CSS reingefuchst, weil ich ein größeres Projekt habe.
Jetzt bin ich auf ein Problem gestoßen, für das ich keine Lösung finde.
Ich habe ein Aufklapp Menü gemacht (siehe Code) das bei den Browsern Opera, Firefox, Edge und Chrome funktioniert. Beim Safari allerdings nicht. Da klappt das Menü nur auf, solange ich mit der Maustaste draufklicke. Lasse ich die Taste los, gehts wieder zu. Außerdem wird die Background color Anweisung der Menüpunkte (soll ja rot sein) ignoriert.
Kann mir da jemand einen Hinweis geben oder einen Gegenvorschlag zu einem Aufklappmenü machen?
und das CSS dazu...
vielleicht kann mir hier einer einen Tipp geben.
Ich habe mich in den letzten 1,5 Jahren ein wenig in HTML und CSS reingefuchst, weil ich ein größeres Projekt habe.
Jetzt bin ich auf ein Problem gestoßen, für das ich keine Lösung finde.
Ich habe ein Aufklapp Menü gemacht (siehe Code) das bei den Browsern Opera, Firefox, Edge und Chrome funktioniert. Beim Safari allerdings nicht. Da klappt das Menü nur auf, solange ich mit der Maustaste draufklicke. Lasse ich die Taste los, gehts wieder zu. Außerdem wird die Background color Anweisung der Menüpunkte (soll ja rot sein) ignoriert.
Kann mir da jemand einen Hinweis geben oder einen Gegenvorschlag zu einem Aufklappmenü machen?
HTML:
<!DOCTYPE HTML>
<html lang="de-DE">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="xyz.css">
<title>TEST</title>
</head>
<body>
<header>
<a class="ribbon" tabindex="-1" title="zurück zur Startseite!" href="#">
<h1 id="logo">Was es ist</h1>
<p>Wer ich bin</p>
</a>
</header>
<main>
<nav id="navigation">
<ul>
<li>
<a href="#"> Text 1 </a>
</li>
<li>
<a href="#"> Text 2 </a>
<ul class="fly">
<li>
<a href="#"> Text 2A </a>
</li>
<li>
<a href="#"> Text 2B </a>
</li>
<li>
<a href="#"> Text 2C </a>
</li>
</ul>
</li>
<li>
<a href="#" id="act"> Text 3 </a>
<ul class="fly">
<li>
<a href="#"> Text 3A </a>
</li>
<li>
<a href="#"> Text 3B </a>
</li>
</ul>
</li>
</ul>
</nav>
</main>
</body>
</html>und das CSS dazu...
CSS:
html {
box-sizing: border-box;
background: #d5d5d5;
}
body {
max-width: 68.5em;
margin: 0 auto;
padding: 0;
background: #fff;
color: #333;
font: normal 1em Arial, sans-serif;
}
header a h1,
header a p {
color: white;
border-left: 0;
padding: 0;
display: table;
}
.ribbon {
display: inline-block;
position: relative;
margin: 2em 0 2em -1.5em;
padding: 0.5em 1em;
background: #4e7a92;
box-shadow: 0px 1px 3px rgba(0, 0, 0, .8);
}
.ribbon::before {
display: block;
width: 1.5em;
height: 0;
position: absolute;
bottom: -1.5em;
left: 0em;
content: "";
border-bottom: 1.5em solid transparent;
border-right: 1.5em solid rgb(0, 80, 116);
}
main {
margin: 0 0 1em;
padding: 1em;
background: #fff;
}
/** Navigation **/
nav#navigation {}
#navigation ul {
list-style-type: none;
width: 100%;
margin-bottom: 30px;
}
#navigation ul li.first-child {
border-top: 1px #DBDBDB solid;
}
#navigation ul li a {
display: block;
border-bottom: 1px solid #4e7a92;
font-size: 1.1em;
line-height: 1.5em;
padding: 1em 30px;
text-decoration: none;
width: 12em;
}
#navigation ul li a:before {
content: " ";
display: inline-block;
width: 1em;
height: 1em;
border-left: 5px solid #4e7a92;
}
ul ul {
display: none;
}
ul li a:active+ul {
display: block;
}
ul li a:focus+ul {
display: block;
}
ul li ul.fly:hover {
display: inline-block;
}
a:hover,
a:focus {
color: white;
text-decoration: none;
background: linear-gradient(to bottom, #550000B0 5%, #FF0000B0 100%);
background-color: #FF0000B0;
}