I am trying to figure out the perfect xsl template for my html navigation.

Here is the html code

<ul class="menu-section">
                                <li class="menu-item-has-children">
                                    <a href="#">Accounts <i class="ion ion-ios-arrow-down"></i></a>
                                    <div class="menu-subs menu-column-1">
                                        <ul>
                                            <li><a href="#">Login and Register</a></li>
                                            <li><a href="#">Help and Question</a></li>
                                            <li><a href="#">Privacy and Policy</a></li>
                                            <li><a href="#">Term of Cookies</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li><a href="#">Contact</a></li>
                            </ul>

Here is my XSL Template:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" indent="yes"/>
<xsl:template match="/">
<xsl:call-template name="menu" />
</xsl:template>
<xsl:template name="menu">
<ul id="wixmenu" class="menu-section">
<xsl:apply-templates select="MENU/ITEM" />
</ul>
</xsl:template>
<xsl:template match="ITEM">
<li class="menu-item-has-children">
<a href="{URL}#" target="{TARGET}">
<xsl:value-of select="TITLE"/>
<i class="ion"></i>
<xsl:value-of select="ICON"/>
</a>
<xsl:if test="ITEM">
<div class="menu-subs menu-column-1">
<ul>
<xsl:apply-templates select="ITEM"/>
</ul>
</div>
</xsl:if>
</li>
</xsl:template>
</xsl:stylesheet>

The result an getting is:

<ul class="menu-section">
                                <li class="menu-item-has-children">
                                    <a href="#">Accounts <i class="ion ion-ios-arrow-down"></i></a>
                                    <div class="menu-subs menu-column-1">
                                        <ul>
                                            <li class="menu-item-has-children"><a href="#">Login and Register</a></li>
                                            <li class="menu-item-has-children"><a href="#">Help and Question</a></li>
                                            <li class="menu-item-has-children"><a href="#">Privacy and Policy</a></li>
                                            <li class="menu-item-has-children"><a href="#">Term of Cookies</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="menu-item-has-children"><a href="#">Contact</a></li>
                            </ul>

What i Want
I want the child elements [login and Register, Help and Question, Privacy and Policy and Terms of Cookies] Not to have the class “menu-item-has-children”. I just want the xsl template to produce the original html code.