0
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%; }Пример:
