If you simply want some text and an image, like these dropdown menus: https://www.haponline.org you can just define it in the xslt. Here I am using the top level page icon in the page settings and the description in the page settings
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
<xsl:template match="/*">
<xsl:apply-templates select="root" />
</xsl:template>
<xsl:template match="root">
<ul>
<xsl:apply-templates select="node" />
</ul>
</xsl:template>
<xsl:template match="node">
<li>
<xsl:attribute name="class">
<xsl:text>level-</xsl:text><xsl:value-of select="@depth"/><xsl:text> page-</xsl:text><xsl:value-of select="@id"/>
<xsl:if test="@first = 1"><xsl:text> </xsl:text>first</xsl:if>
<xsl:if test="@last = 1"><xsl:text> </xsl:text>last</xsl:if>
<xsl:if test="@selected = 1"><xsl:text> </xsl:text>active</xsl:if>
</xsl:attribute>
<xsl:choose>
<xsl:when test="@enabled = 1">
<a href="{@url}">
<xsl:value-of select="@text" />
</a>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="@text" />
</xsl:otherwise>
</xsl:choose>
<xsl:if test="node">
<xsl:choose>
<xsl:when test="@depth < 1">
<div class="flyout">
<div class="two-columns">
<div class="column">
<ul>
<xsl:apply-templates select="node" />
</ul>
</div>
<div class="column">
<p>
<img src="{@icon}" height="131" width="202" alt="{@text}" />
</p>
<p>
<xsl:value-of select="description" />
</p>
</div>
</div>
</div>
</xsl:when>
<!--<xsl:otherwise>
<xsl:if test="@id = 126">
<div class="flyout">
<div class="column">
<ul>
<xsl:apply-templates select="node" />
</ul>
</div>
</div>
</xsl:if>
</xsl:otherwise>-->
</xsl:choose>
</xsl:if>
</li>
</xsl:template>
</xsl:stylesheet>