[august]

Nice tip, but how do I implement it in a DHTML menu like the one Cart-labs has. I need it so it only apply to the top categories not the submenus, so everything will stay inside the line.
I already try after the
but only afect the submenus.

Here is my code:

{literal}

<style type="text/css">
.menutitle1{
font-weight: bold;
text-decoration: FF8800;
border:0px;
width:160px;
cursor:pointer;
margin-bottom: 0px;
padding:2px;
margin-left: 5px;
border-bottom:0px;
}
.bottom1{
margin-left: 7px;
border-top:1px solid #F2FBE4;
height:1px;
width:160px;
padding:0px;
margin-bottom: 0px;
}
.sub1{
margin-bottom: 0px;
margin-left: 7px;
border:0px solid #F2FBE4;
color:#000000;
width:160px;
padding:2px;
border-bottom:0px;
}
</style>

<script type="text/javascript">
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.sub1{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsBy TagName("span");
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar[i].className=="sub1")
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

</script>
{/literal}

<table width="181" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="{$ImagesDir}/new/categories-header.gif" height="46" valign="top"><p class="menutext">product <font color="#FFC000">categories</font></p>
</td>
</tr>
<tr>
<td background="{$ImagesDir}/new/categories-repeat.gif" valign="top">
{* Keep all menus within masterdiv *}
<div id="masterdiv">
{section name=cat_num loop=$categories}
<div class="menutitle1" onclick="javascript:self.location='home.php?cat={$ categories[cat_num].categoryid}'">[img]{$ImagesDir}/new/bullet.gif[/img]{$categories[cat_num].category}</div>
<span class="sub1" id="{$categories[cat_num].categoryid}">
{assign var="switch_var" value=0}
{section name=subcat_num loop=$allcategories}
{if $allcategories[subcat_num].parentid == $categories[cat_num].categoryid && $allcategories[subcat_num].category != $categories[cat_num].category}
{if $cat eq $allcategories[subcat_num].categoryid}
{assign var="switch_var" value=$allcategories[subcat_num].parentid}
{/if}
[img]{$ImagesDir}/new/bullet.gif[/img]<a href="home.php?cat={$allcategories[subcat_num].categoryid}">
{if $cat eq $allcategories[subcat_num].categoryid}
<font color="FF8000">{$allcategories[subcat_num].category }</font>
{else}
{$allcategories[subcat_num].category }
{/if}
</A>

{/if}
{/section}
</span>
{if $switch_var gt 0}
<script>SwitchMenu('{$switch_var}')</script>
{/if}
{if $cat eq $categories[cat_num].categoryid AND $categories[cat_num].subcategory_count > 0}
<script>SwitchMenu('{$cat}')</script>
{/if}

{/section}

</div>
</td>
</tr>
<tr>
<td background="{$ImagesDir}/new/categories-footer.gif" height="31"> </td>
</tr>