CSS3 Dropdown Menü funktioniert nicht richtig 2
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>
.nav{
width:70%;
margin-left:calc(50% - 35%);
}
.nav > ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.nav li {
width:calc(100% / 7);
font-size: 1.5rem;
}
@media (min-width: 45em) {
.nav > ul {
flex-direction: row;
}
.nav li {
font-size: 1.0em;
}
}
.nav a {
display:block;
text-decoration: none;
padding:10px 0px 10px 0px;
font-weight: bold;
text-align: center;
color: black;
border-bottom:3px solid transparent;
}
.nav li a:focus,
.nav li a:hover {
color:black;
background:lightgrey;
border-bottom:3px solid orange;
}
.nav .submenu {
visibility: hidden;
z-index: 1000;
}
.nav .submenu li {
position:relative;
list-style:none;
}
.nav li:hover .submenu{
visibility: visible;
height: auto;
}
.nav .submenu li:hover{
position:relative;
deisplay:block;
padding-left:5px;
list-style:none;
width:150%;
margin-left:-50%;
text-align:center;
}
</style>
<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>