I have never used the field but you could simply use a repeater and create an ItemTransformation like this:

<li><a class="qmparent" href="<%# (GetSubItemCount() > 0 ? "javascript:void(0)" : GetDocumentUrl()) %>"><%# Eval("DocumentName") %></a><%# (GetSubItemCount() > 0 ? "<ul>" : "</li>") %>
<cms:CMSRepeater ID="repSubItems" Path='<%# Eval("NodeAliasPath") + "/%" %>' runat="server" ClassNames="CMS.MenuItem" TransformationName="CMS.MenuItem.SubNavSubLI" OrderBy="NodeLevel, NodeOrder, NodeName" MaxRelativeLevel="1" WhereCondition="DocumentMenuItemHideInNavigation='false'" />

<script runat="server">
protected void Page_PreRender(object sender, EventArgs e)
{
    repSubItems.ReloadData(true);
}
protected int GetSubItemCount()
{
    repSubItems.ReloadData(true);
    return repSubItems.Items.Count;
}
</script>

This checks each items sub items and if the sub items count is greater than 0 it inserts a UL tag and changes the href attribute of the <a> tag. Should be able to copy and paste this and make minor modifications to the class value and the href values.

Hello Ian,

FroggEye's suggestion is also correct but here is another approach.

You can create a hover effect using CSS for the CSS List Menu web part.

If you have the following for zone definition:

<div class="zonemenu">
  <cms:CMSWebPartZone ID="zonemenu" runat="server" />
</div>

And you check the following CSS List Menu property:

Render CSS classes

You can then use the following sample for CSS:

/*#zonemenu sample#*/
.zonemenu .CMSListMenuUL
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    position: relative;
}

.zonemenu .CMSListMenuUL li
{
    /*float: left;
    padding: 0px 22px 0px 0px;*/
}

.zonemenu .CMSListMenuUL li a
{
    /*color: #fff;*/
    text-decoration: none;
    display: block;
    height: 23px;
    font-size: 16px;
    line-height: 23px;
    padding: 0px 8px;
    border: 1px solid transparent;
    font-family: Arial;
}

.zonemenu .CMSListMenuUL .CMSListMenuHighlightedLIfirst a,
.zonemenu .CMSListMenuUL .CMSListMenuLIfirst a
{
    /*padding-left: 0px;*/
}


.zonemenu .CMSListMenuHighlightedLI a,
.zonemenu .CMSListMenuHighlightedLIfirst a
{
    /*color: #8cd2f8 !important;
    text-decoration: none;*/
}

.zonemenu .CMSListMenuUL li:hover a
{
    /*background-color: #4a83bc;
    border: 1px solid #5f96d4;
    border-bottom: 1px solid #4a83bc;
    color: #fff !important;*/
}

.zonemenu .CMSListMenuUL li .CMSListMenuUL
{
    display: none;
}

.zonemenu .CMSListMenuUL li:hover .CMSListMenuUL
{
    display: block;
    /*position: absolute;
    height: auto;
    min-width: 130px;
    overflow: visible;
    background-color: #4a83bc;
    border: 1px solid #5f96d4;
    border-top: none;
    padding-top: 8px;*/
}

.zonemenu .CMSListMenuUL li:hover .CMSListMenuUL li
{
    /*float: none;
    padding-right: 8px;*/
}

.zonemenu .CMSListMenuUL li:hover .CMSListMenuUL .CMSListMenuLIfirst,
.zonemenu .CMSListMenuUL li:hover .CMSListMenuUL .CMSListMenuHighlightedLIfirst
{
    /*padding-left: 8px;*/
}

.zonemenu .CMSListMenuUL li:hover .CMSListMenuUL a
{
    /*border: none;
    font-size: 13px;
    color: #fff !important;*/
}

.zonemenu .CMSListMenuUL li:hover .CMSListMenuUL a:hover
{
    /*color: #8cd2f8 !important;*/
}

Best regards,
Filip Ligac