2. Находим:
{if $categories_tree && $categories_tree_count>1} <div align="left"> {section name=h loop=$categories_tree} {if $categories_tree[h].categoryID != 1} <table cellspacing="0" cellpadding="0" width="100%"> <tr class="dtree"> {assign var=maxmmm value=$smarty.section.h.index+1} {section name=j loop=$categories_tree max=$categories_tree[h].level-1} <td><img src="data/{$smarty.const.TPL}/pixel.gif" alt="" align="left" width="8" height="10"></td> {/section} <td class="dtree">{if $smarty.const.CONF_SHOW_COUNTPROD eq 1}<span style="float:right"> {$categories_tree[h].products_count}</span>{/if}<a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}category_{$categories_tree[h].categoryID}.html{else}index.php?categoryID={$categories_tree[h].categoryID}{/if}" {if $categoryID == $categories_tree[h].categoryID}class="bf"{/if}>{$categories_tree[h].name}</a></td> </tr> </table> {if $smarty.section.h.index ne $categories_tree_count-1} <div style="background: url('data/{$smarty.const.TPL}/pix_horiz_b.gif') repeat-x top left;"><img src="data/{$smarty.const.TPL}/pixel.gif" alt="" width="100%" height="1"></div> {/if} {/if} {/section} </div> {else} <div align="center">{$smarty.const.STRING_NO_CATEGORIES}</div> {/if}3. Заменяем:
{if $big_categories_tree && $big_categories_tree_count>0} {assign var="oldnumber" value=0} <ul id="navmenu-h"> {section name=h loop=$big_categories_tree} {if $big_categories_tree[h].categoryID != 1} {if $big_categories_tree[h].level > $oldnumber}<ul>{/if} {if $big_categories_tree[h].level < $oldnumber}{section name=w loop=$oldnumber-$big_categories_tree[h].level}</ul>{/section}{/if} {if $big_categories_tree[h].subcount > 0} {if $categoryID != $big_categories_tree[h].categoryID}<li>{else}<li>{/if}{else}<li>{/if} <a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}category_{$big_categories_tree[h].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h].categoryID}{/if}" {if $categoryID == $big_categories_tree[h].categoryID}class="bf"{/if}>{$big_categories_tree[h].name}</a> {if $categoryID == $big_categories_tree[h].categoryID} {/if} {assign var="oldnumber" value=$big_categories_tree[h].level} {assign var="oldcat" value=$big_categories_tree[h].categoryID} {/if} {/section} </ul> {else} <div class="vcent">{$smarty.const.STRING_NO_CATEGORIES}</div> {/if}4. Добавляем стили:
ul#navmenu-h { margin: 0; padding: 0; list-style: none; position: relative; } ul#navmenu-h ul { width: 160px; /* Sub Menu Width */ margin: 0; list-style: none; display: none; position: absolute; top: 100%; left: 0; } ul#navmenu-h ul ul,ul#navmenu-h ul ul ul { top: 0; left: 100%; } ul#navmenu-h li { float: left; display: inline; position: relative; } ul#navmenu-h ul li { width: 100%; display: block; } /* Root Menu */ ul#navmenu-h a { border-top: 1px solid #FFF; border-right: 1px solid #FFF; padding: 6px; float: left; display: block; background: #DDD; color: #666; font: bold 11px Arial, sans-serif; text-decoration: none; height: 1%; } /* Root Menu Hover Persistence */ ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a { background: #BBB; color: #FFF; } /* 2nd Menu */ ul#navmenu-h li:hover li a,ul#navmenu-h li.iehover li a { float: none; background: #BBB; } /* 2nd Menu Hover Persistence */ ul#navmenu-h li:hover li a:hover,ul#navmenu-h li:hover li:hover a,ul#navmenu-h li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover a { background: #999; } /* 3rd Menu */ ul#navmenu-h li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li a { background: #999; } /* 3rd Menu Hover Persistence */ ul#navmenu-h li:hover li:hover li a:hover,ul#navmenu-h li:hover li:hover li:hover a,ul#navmenu-h li.iehover li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover a { background: #666; } /* 4th Menu */ ul#navmenu-h li:hover li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li.iehover li a { background: #666; } /* 4th Menu Hover */ ul#navmenu-h li:hover li:hover li:hover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover li a:hover { background: #333; } /* Hover Function - Do Not Move */ ul#navmenu-h li:hover ul ul,ul#navmenu-h li:hover ul ul ul,ul#navmenu-h li.iehover ul ul,ul#navmenu-h li.iehover ul ul ul { display: none; } ul#navmenu-h li:hover ul,ul#navmenu-h ul li:hover ul,ul#navmenu-h ul ul li:hover ul,ul#navmenu-h li.iehover ul,ul#navmenu-h ul li.iehover ul,ul#navmenu-h ul ul li.iehover ul { display: block; } #page { margin: 0 auto; width: 800px; text-align: left; position: relative; } /* Clear */ .clear { clear: both; } .clearfix,#page,#nav,#body,#content,#foot { display: inline-block; } .clearfix:after,#page:after,#nav:after,#body:after,#content:after,#foot:after { clear: both; display: block; font: 0px/0px serif; content: "."; height: 0; visibility: hidden; } html[xmlns] .clearfix,html[xmlns] #page,html[xmlns] #nav,html[xmlns] #body,html[xmlns] #content,html[xmlns] #foot { display: block; } /* Some classes */ .small { font-size: .8em; } .large { font-size: 2em; } .quiet { color: #999; } .highlight { background: #FFC; } .top { margin-top: 0; padding-top: 0; } .bottom { margin-bottom: 0; padding-bottom: 0; } .left { margin: 0 20px 20px 0; float: left; } .right { margin: 0 0 20px 20px; float: right; } .hide { display: none; } p { margin: 0 0 20px; } ul,ol { margin: 0 30px 20px; } ul ul,ol ol,ul ol,ol ul { margin-bottom: 0; } ul { list-style-type: disc; } ol { list-style-type: decimal; } dl { margin: 0 40px 20px; } dl dt { font-weight: bold; } dl dd { margin: 0 0 0 20px; } abbr,acronym { border-bottom: 1px dotted #000; cursor: help; } address { margin: 0 0 20px; font-style: italic; } del {} blockquote { margin: 0 40px; } strong { font-weight: bold; } em,dfn { font-style: italic; } dfn { font-weight: bold; } pre { margin: 0 0 20px; } pre,code { font: 11px/1.5 monospace; white-space: pre; } caption { background: #FFC; } #content { padding: 0px 20px 1px; z-index: 1;} * { margin: 0; padding: 0; font-size: 100%; }Пример: