Erstelle dazu ein neues Modul (Name z.B. Hover Menue), was du dann entsprechend plazieren kannst.
Vergess nicht Inhalte vorbereiten darin zu aktivieren.
Dann schalte um auf Code und gib zum Test folgendes dort ein:
<ul class="hover-menu">
<li>
<a href="#">Menüpunkt 1</a>
<ul class="submenu">
<li><a href="#">Unterpunkt 1</a></li>
<li><a href="#">Unterpunkt 2</a></li>
</ul>
</li>
<li>
<a href="#">Menüpunkt 2</a>
<ul class="submenu">
<li><a href="#">Unterpunkt 1</a></li>
<li><a href="#">Unterpunkt 2</a></li>
</ul>
</li>
</ul>
Danach gehst du in deine Custom.css und fügst folgenden Code dort ein:
*/Mein Hover Menue*/
.hover-menu {
list-style: none;
padding: 0;
margin: 0;
}
.hover-menu > li {
position: relative;
display: inline-block;
}
.hover-menu > li > a {
display: block;
padding: 10px 15px;
background: #333;
color: white;
text-decoration: none;
}
.hover-menu .submenu {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: 100%;
left: 0;
display: none;
background: #444;
}
.hover-menu .submenu li a {
display: block;
padding: 10px;
color: white;
text-decoration: none;
}
.hover-menu li:hover .submenu {
display: block;
}
Danach Modul auf einer Modulposition einfügen und Ergebnis testen.