outputing <div> statements to html using XSL/XML

[iamzug]

I want to get a drop down menu at the top of a page through XSL and XML. However I cannot output the div statements into the html page.

I want the following output:
<div id="menubar">
<div id ="name 1" class="menu">name 1<ul>
<li>subname 1</li>
<li>subname 2</li>
etc etc etc



But using the following XML and XSL I only get 'namesubnamesubnamenamesubname' etc. Can anybody help me?




XSL:
<xsl:variable name="menu">
<div id="menubar">
<xsl:for-each select="titles/category">
<xsl:variable name="categoryname"><xsl:value-of select="name"></xsl:value-of></xsl:variable>
<div id="{$categoryname}" class="menu"><xsl:value-of select="name" /><ul>
<xsl:for-each select="sub">
<xsl:variable name="subname">
<xsl:value-of select="subname" /></xsl:variable>
<li><xsl:value-of select="$subname" /></li>
</xsl:for-each>
</ul>
</div>
</xsl:for-each>
</div>
</xsl:variable>






XML:

<titles>
<category>
<name>name 1</name>
_{<subname>subname 1</subname>}
_{<subname>subname 2</subname>}
_{<subname>subname 3</subname>}
</category>
<category>
<name>name 2</name>
_{<subname>subname 1</subname>}
_{<subname>subname 2</subname>}
</category>
<titles>