CSS3 Dropdown Menü funktioniert nicht richtig
Hallo Leute,
Hab seit kurzem mit HTML5 & CSS3 angefangen.
Möchte auf meiner Homepage ein verschachteltes Dropdown Menü mit CSS3 erstellen.
Hab bei dieser Seite eins gefunden
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Dropdown-Men%C3%BCs_mit_CSS_gestalten
Nun hab ich das in meine Homepage eingefügt aber es funktioniert nicht richtig.
Die anderen Menü punkte nach dem Dropdown Menü werden nach unten verschoben und das Dropdown menü wird auch nicht richtig angezeigt.
Könnte mir jemmand bitte sagen was ich da falsch mache?
Der hier verwendete Code
<style>
body {
background: #DCDCDC;
font-size: 100%;
margin: 0em;
padding: 0em;
}
h1 {
font-size: 2.5em;
line-height: 3.8em;
font-family: Helvetica;
font-weight: 100;
color: #E2DBDB;
margin: 0em;
}
h2 {
font-size: 1.563em;
line-height: 1.8em;
font-family: Helvetica;
font-weight: 100;
color: #2F2D2C;
margin: 0em;
padding: 1.25em;
text-align: left;
}
p {
line-height: 1.25em;
font-family: Helvetica;
font-weight: 100;
color: #2F2D2C;
margin: 0em;
padding: 0.8em;
text-align: justify;
}
ul {
margin: 0px;
padding: 0px;
}
li {
list-style: square;
font-family: Helvetica;
font-weight: 100;
color: #2F2D2C;
line-height: 1.25em;
margin: 0.313em 0em 0.313em 0em;
padding: 0em;
}
img {
width: 90%;
height: auto;
max-width: 100%;
}
a {
text-decoration: none;
}
/* On Top Bar */
#menubar {
display: block;
background: #FFFFFF;
}
#menubar ul {
display: block;
width: 2em;
padding: 0.9em;
}
#menubar ul li {
display: inline;
}
#menubar ul li a.menubutton {
display: none;
}
/* Header */
header {
display: block;
background: #2F2D2C;
text-align: center;
}
nav {
display: block;
height: 2.5em;
background: #FFFFFF;
text-align: center;
width:100%;
}
nav ul {
width:100%;
display:block;
}
nav ul li {
float:left;
list-style:none;
margin: 0em 0.188em 0em 0.188em;
}
nav>ul>li{
width:calc(95% / 7);
}
nav ul li:hover> ul > li{
display:block;
}
nav ul li ul{
position:relative;
width:100px;
}
nav ul li a {
color: #454040;
font-size: 1.125em;
line-height: 2.5em;
padding: 0.563em 0.938em 0.375em 0.938em;
transition: background 0.2s;
-webkit-transition: background 0.2s;
}
nav ul li a:hover {
background: #DBD9D8;
border-bottom: 0.188em solid #E7590B;
}
nav ul li a.active {
border-bottom: 0.188em solid #E7590B;
}
/* submenu navigation links */
nav .submenu {
visibility: hidden;
height: 0;
z-index: 1000;
}
nav .submenu li {
display: block;
/* width: 15em; */
}
/** Show the submenu on hover, focus **/
nav li:hover .submenu,
nav li:active .submenu,
nav li:focus .submenu,
nav li:focus-within .submenu {
visibility: visible;
height: auto;
}
nav{
margin-bottom:100px;
}
#main {
display: block;
width: 96%;
max-width: 980px;
margin: 1.25em auto;
padding: 0em;
}
#main article {
display: inline-block;
width: 65.3%;
background: #FFFFFF;
vertical-align: top;
margin: 0em;
padding: 0em;
text-align: center;
}
#main article img {
max-width: 560px;
max-height: 450px;
box-shadow: 0px 0px 10px -5px #4C4948;
border-radius: 5px;
}
#main article p {
line-height: 1.25em;
font-family: Helvetica;
font-weight: 100;
color: #024f28;
margin: 0em;
padding: 0.8em;
text-align: justify;
}
#main article h2 {
padding: 1em 1.8em 1em 1.8em;
}
#main article span.kat {
color: #72D033;
}
#main article span.fett {
font-weight: 800;
}
#main article span.sidekat {
color: #024f28;
}
#main aside {
display: inline-block;
width: 30.6%;
margin-left: 3%;
padding: 0em;
vertical-align: top;
}
#main aside section {
margin-bottom: 1.563em;
background: #FFFFFF;
border-bottom: 0.188em solid #E7590B;
}
#main aside section ul {
padding: 0em 1.875em 1.25em 2.5em;
}
/* Footer */
footer {
display: block;
background: #2F2D2C;
text-align: center;
}
footer ul {
display: block;
width: 100%;
max-width: 980px;
text-align: left;
margin: 0px auto;
}
footer ul li {
display: inline-block;
font-size: 0.8em;
line-height: 2.8em;
color: #E2DBDB;
padding: 0em 0.625em 0em 0.625em
}
footer ul li a {
color: #E2DBDB;
}
/* Mobile Style */
@media screen and (max-width: 600px) {
body {
font-size: 90%;
}
}
@media screen and (max-width: 600px) {
#main aside , #main article {
width: 100%;
display: block;
margin: 0.625em 0em 0.625em 0em;
}
}
@media screen and (min-width: 550px) {
nav.nav {
display: block !important;
}
}
@media screen and (max-width: 550px) {
body {
font-size: 86%;
}
#menubar ul li a.menubutton {
display: block;
}
nav {
display: none;
height: auto;
}
nav ul li {
display: block;
margin: 0.3em 0em 0.3em 0em;
}
}
</style>
<script src="/js_webseite/jquery.js"></script>
<script>
$(document).ready(function() {
$('.menubutton').click(function() {
$('nav').slideToggle('slow');
});
});
</script>
<body>
<section id="menubar">
<ul>
<li><a class="menubutton" href="#menu"><img src="images/menubar.png" /></a></li>
</ul>
</section>
<header>
<h1>SONNENWIND BIO KG</h1>
</header>
<nav class="nav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="kindergaerten.html">Kindergärten</a></li>
<li><a href="index.html">Gastronomie</a></li>
<li><a href="index.html">Wiederverkauf</a></li>
<li tabindex="0"><a href="index.html">Produkte</a>
<ul class="submenu">
<li><a tabindex="0" href="#">Gemüse</a></li>
<li><a tabindex="0" href="#">Suppen</a></li>
</ul>
</li>
<li><a href="index.html">Links</a></li>
<li><a href="index.html">Kontakt</a></li>
</ul>
</nav>
<section id="main">
<article>
<h2><span class="kat">Über uns | </span><span class="sidekat">100% Biogenuss</span></h2>
<p>ARtikel</p>
</article>
<aside>
<section>
<h2>Weiter Artikel</h2>
<ul>
<li>Hier werde ich das Video einfügen!</li>
<li>Nächstes Video</li>
<li>und noch was</li>
</section>
<section>
<h2>Textfeld</h2>
<p>Zertifikat</p>
</section>
<section>
<h2>Kategorien</h2>
<ul>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
</ul>
</section>
</aside>
</section>
<footer>
<ul>
<li>© </li>
<li>Kontakt</li>
<li>Datenschutz</li>
</ul>
</footer>c
</body>