Der Navigation ein Popup-Div mit Untermenü bei Hover hinzufügen

    Joomla Version
    4.4.5
    PHP Version
    Unbekannt
    Hoster
    Unbekannt

    Hallo zusammen,

    ich könnte etwas Hilfe bei dem CSS-Code gebrauchen für ein Hover Untermenü, welches in einem extra Container stehen soll und erst bei Hover sichtbar sein soll.

    Diese Seite: KLICK

    Das Obermenü "Leistungen" hat aktuell schon ein Untermenü Namens "Vitamin-d" und ist ausgeblendet.

    Was ich bisher gemacht habe:

    - Dem Main Menü in der Modulbearbeitung eine CSS Klasse gegeben "hovermenu"

    - Folgenden Code entwurfen, welcher so aber nicht funktioniert:

    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.

    Servus Dirk, das hat gut funktioniert, ich hab lediglich den Code etwas angepasst, vielen Dank!

    Jetzt brauche ich nur noch eine Sache, und zwar bekomme ich die aktive Seite (active) einfach nicht per text-decoration: underline; unterstrichen...Habe schon alles mögliche versucht. Kannst du hier noch helfen?

    Das hier funktioniert jedenfalls nicht:

    Code
    .hovermenu li.active a,
.hovermenu li.current a,
.hovermenu li.current-menu-item a {
    text-decoration: underline;
}

    Das neue Menü ist schon online mit dem Submenü :)

    Hier mein angepasster Code für alle, die evtl. später auch mal Hilfe brauchen:

    JasonX87 :

    Beachte aber das dein Untermenü bei Viewport kleiner 870Pixel breite derzeit nicht angezeigt wird z.B.bei Smartphone hochkant.

    Kannst du in deinem Menü-Modul im Tab Erweitert nicht das Layout Collapsible-Dropdown einstellen und speichern ?