Ich hab da nochmal eben einen tollen Code gefunden und eingebaut
Style kommt in die Seiteneinstellungen (Rechts oben wo die 3 Punkte untereinander sind, ins Seiten-CSS)
#menu ul {
color:#ffffff;
list-style: none;
padding-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
display: flex;
align-items: center;
}
#menu ul li ul {
flex-direction: column;
position: absolute;
left: 0px;
top: 100%;
white-space: nowrap;
visibility: hidden;
opacity: 0;
transition: all 0.5s ease-in;
}
#menu ul li {
background-color: rgba(27, 64, 91, 0.8);
padding: 20px;
transition: all 0.2s ease-in;
position: relative;
}
#menu ul li:hover {
background-color:rgba(58, 103, 137, 0.8);
}
#menu ul li:hover ul {
visibility: visible;
opacity: 1;
}
Code hab ich so eingebaut:
1. Leerer Block
2. Grid mit 2 Zeilen wegen des Logos links (ist jedem selbst überlassen, welchen man nimmt)
2. Element -> Einbettungen in das rechte Feld gezogen
4. folgenden Code im Editor-Feld <> eingegeben:
<div id="menu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Unterseite 1</a></li>
<li><a href="#">Unterseite 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a>
<ul>
<li><a href="#">Unteritem 3</a></li>
<li><a href="#">Unteritem 4</a></li>
<li><a href="#">Unteritem 5</a></li>
<li><a href="#">Unteritem 6</a></li>
</ul>
</li>
</ul>
</div>
https://meine-hp.com/demo
Ich gucke mal, ob ich den Block als Vorlage einbauen kann.
Im Prinzip sieht der Aufbau logisch aus und sollte leicht erweiter und änderbar sein.