* {
	padding:0;
	margin:0;
}

body {
	font:0.7em Verdana;
	color:#595959;
	background:#fff;
}

/* Основные элементы */

img {
	border:none;
}

p {
	margin-bottom:10px;
}

a {
	color:#888;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

h1 {
	color:#00AEEF;
	font-size:1.8em;
	font-weight:normal;
}

h2 {
	font-size:1.2em;
	color:#fff;
	background:url("../images/h2.png") no-repeat;
	height:33px;
	line-height:33px;
	padding-left:30px;
	margin:0 -10px 5px;
}

h3 {
	background:url("../images/h3.gif") no-repeat left center;
	color:#80C42E;
	font-size:1.8em;
	padding:7px 0 0 40px;
	margin:0 0 0 20px;
	font-weight:normal;
}

h4, h5 {
	color:#1CBBB4;
	font-size:1.2em;
	font-weight:normal;
	padding-left:20px;
	margin-bottom:10px;
}

h4 {
	color:#ffffff;
	font-size:1.5em;
	font-weight:normal;
}

h5 {
	background:url("../images/author.gif") no-repeat left center;
}

h6 {
	font-size:1.2em;
	color:#fff;
	background:url("../images/menu.png") no-repeat;
	height:33px;
	line-height:33px;
	padding-left:30px;
	margin:0 -10px 5px;
}


/* Структура сайта */

#wrapper {
	min-width:980px;
	width:98%;
	padding:0 1%;
	width:expression(((document.documentElement.clientWidth || document.body.clientWidth) < 980)? "980px" : "98%");
}

/* Шапка сайта */

#header {
	border-top:5px solid #ffffff;
	text-align:right;
}

#logo {
	margin:15px 0 0 20px;
	float:left;
}

#nav {
	margin:15px 20px 0 0;
}

/* Верхнее меню */

#navigation {
	margin:20px 0 2px;
}

#navigation li {
	list-style:none;
	display:block;
	float:right;
	margin-left:7px;
	height:28px;
}

#navigation li a {
	text-transform:lowercase;
	padding:5px 20px;
	color:#fff;
	font-size:1.2em;
	line-height:28px;
	height:28px;
	background:#0F5069 url("../images/menu_list.gif") no-repeat right top;
}

#navigation li a:hover {
	background:#0188BA url("../images/menu_list_current.gif") no-repeat right top;
	text-decoration:none;
}

#navigation .current a {
	background:#0188BA url("../images/menu_list_current.gif") no-repeat right top;
}

/* Панель управления */

#panel {
	background:#3E3E3E url("../images/panel1.gif") repeat-x bottom;
	margin-top:50px;
	text-align:left;
	color:#fff;
}

#panel .inside1 {
	background:url("../images/panel2.gif") no-repeat bottom left;
}

#panel .inside2 {
	background:url("../images/panel3.gif") no-repeat bottom right;
	padding:15px 10px 45px 20px !important;
	padding:15px 10px 15px 20px;
}

#panel a {
	color:#D7D7D7;
}

.red a {
	color:#f00;
}

#panel ul {
	list-style:none;
	float:right;
	padding:15px 0 0 0;
}

#panel li {
	margin-bottom:5px;
}

#panel li a {
	background:url("../images/panel_list.gif") no-repeat left center;
	padding-left:12px;
}

#panel .inside2 .left {
	width:48%;
}

#panel .inside2 .right {
	width:49%;
	padding-left:20px;
	background:url("../images/lines.gif") repeat-y left;
}

#panel table {
	width:100%;
	vertical-align:top;
}

/* Классы для форм */

.button {
	border:1px solid #393939;
	color:#1CBBB4;
	font:0.9em Verdana;
	height:19px;
	background:#323232;
	padding:0 5px;
}

.button1 {
	border:1px solid #999;
	color:#666;
	font:0.9em Verdana;
	height:19px;
	background:#fff;
	padding:0 5px;
}

.search {
	border:1px solid #B2B2B2;
	background:#fff;
	height:16px;
	padding:0;
	margin:0;
	width:82%;
	vertical-align:bottom;
}

.textbox {
	border:1px solid #B2B2B2;
	background:#fff;
	height:16px;
	padding:0;
	margin:0;
	width:15%;
	vertical-align:bottom;
}

/* Контент сайта */

#container {
	width: 100%;
	float:right;
	margin-left: -242px;
}

#content {
	margin-left:220px;
	padding-left:14px;
}

/* Топ последних файлов */

#top {
	background:url("../images/top.png") repeat-x;
	margin-bottom:14px;
}

#top .inside1 {
	background:url("../images/top_left.png") no-repeat left;
}

#top .inside2 {
	background:url("../images/top_right.png") no-repeat right;
	height:204px;
	padding:0 0 0 185px;
}

/* Блок с последним файлом */

.last_file {
	width:33%;
	background:url("../images/last_file.png") no-repeat top center;
	text-align:center;
	float:left;
	margin:7px 0 0 0;
	padding:7px 0 0 0;
}

.last_file img {
	margin-bottom:10px;
}

.last_file a {
	color:#333;
	font-size:1.2em;
}

/* Центральная колонка */

#main {
	margin-right:220px;
	padding-right:8px;
}

#main ul {
	margin-bottom:10px;
}

#main li {
	list-style-position:inside;
}

.afteranchor a {
	color:#098876;
	font-weight:bold;
	background:url("../images/afteranchor.gif") no-repeat left center;
	padding-left:10px;
	margin:0 30px 0 0;
}

/* Правая колонка */

#right {
	width:220px;
	float:right;
}


#right a {
	text-decoration:underline;
	color:#555;
}

#right a:hover {
	text-decoration:none;
}

/* Левая колонка */

#sidebar {
	width:220px;
	float:left;
}

#sidebar a {
	text-decoration:underline;
	color:#555;
}

#sidebar a:hover {
	text-decoration:none;
}

/* Информационные блоки */

.block {
	background:#e4e0e0;
	padding:0 10px 10px;
	margin-bottom:10px;
}

.block form {
	line-height:20px;
	padding-left:20px;
}

.block img {
	margin:5px 3px;
}

.block li {
	list-style:none;
}

.block li a {
	background:url("../images/arw.gif") no-repeat left top;
	padding-left:10px;
}

/* Меню в левой колонке */

#menu li {
	padding:5px 0;
	border-bottom:1px solid #ddd;
}

#menu li a {
	color:#737373;
	background:url("../images/arrow.gif") no-repeat left top;
	padding-left:32px;
	font-size:1.1em;
	font-weight:bold;
	text-decoration:none;
}

#menu li a:hover {
	text-decoration:underline;
}

/* Подвал сайта */

#footer {
	border-top:5px solid #399CF8;
	padding:7px 0;
	text-align:center;
	font-size:0.9em;
}

#footer a {
	color:#448CCB;
}

/* Дополнительные классы */

.clearing {
	height:0;
	clear:both;
}

.left {
	float:left;
}

.right {
	float:right;
}

.red {
	color:#F26C4F;
}

.green {
	color:#47958A;
}

/* Темы */

.shortnews {
	clear:left;
}

.shortnews img {
	margin-right:5px;
}

.topic img {
	margin-right:5px;
}

/* Стили для комментариев */

.answer {
	width:98%;
	margin:10px 0;
	border-collapse:separate;
}

.answer td {
	padding:0;
}

.answer th {
	background:#00AEEF;
	color:#fff;
	font-weight:normal;
	padding:4px;
	text-align:left;
}

.answer th a {
	color:#fff;
	text-decoration:underline;
	font-weight:bold;
}

.answer .comment_user_info {
	background:#eee;
	width:25%;
	padding:5px;
	font-size:0.9em;
	vertical-align:top;
}

.answer .user_comment {
	background:#f9f9f9;
	padding:5px 10px;
	vertical-align:top;
}

.comment_bottom td {
	background:#00AEEF;
	padding:3px 5px;
	color:#fff;
	font-size:0.9em;
}

.comment_bottom td a {
	color:#fff;
	text-decoration:underline;
}

.comment_bottom td a:hover {
	text-decoration:none;
}

/* Добавление комментариев */

.addcomment {
	width:98%;
	border-collapse:separate;
	margin-bottom:10px;
	vertical-align:top;
}

.addcomment th {
	padding:4px;
	background:#00AEEF;
	color:#fff;
}

.addcomment textarea {
	width:100%;
	border:none;
	height:100px;
}

.textform {
	border:1px solid #ddd;
	background:#fff;
}

.commentform {
	line-height:25px;
	width:200px;
}

/* Регистрация */

.registration td{
	padding:5px;
}

.registration .textform {
	width:150px;
}

/* Добавление новости */

.addnews {
	width:95%;
}

.addnews td {
	padding:3px;
}

.addnews textarea {
	border:1px solid #ddd;
	width:100%;
	height:100px;
}

/* Обратная связь */

.feedback {
	width:98%;
}

.feedback td {
	padding:3px;
}

.feedback textarea {
	width:100%;
	height:100px;
}

/* Восстановление забытого пароля */

.lostpassword td {
	padding:3px;
}

/* Персональные сообщения */

.pm {
	width:95%;
	border-collapse:separate;
}

.pm td {
	padding:3px;
}

.pm textarea {
	width:100%;
	border:0;
	height:100px;
}

/* Информация о пользователе */

.userinfo {
	width:98%;
	margin-bottom:10px;
}

.userinfo td {
	padding:3px;
	vertical-align:top;
}

.userinfo textarea {
	width:100%;
	height:80px;
}

/* Статистика */

.stats {
	width:98%;
	border-collapse:separate;
	margin-bottom:10px;
}

.stats td {
	vertical-align:top;
	padding:3px;
}

/* Поиск */

.searchmenu {
	width:98%;
	border:0;
	margin-bottom:10px;
}

.white a {
	color:#fff;
}e a {
	color:#fff;
}
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;


}

.glossymenu li{
position: relative;
}

.glossymenu li a{
background: white url(../images/glossyback.gif) repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}

.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}

.glossymenu li ul li{
float: left;
}

.glossymenu li ul a{
width: 180px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
}

.glossymenu .arrowdiv{
position: absolute;
right: 2px;
background: transparent url(../images/arrow2.gif) no-repeat center right;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url(../images/glossyback1.gif);
}

/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */



Теперь в папку images добовляешь эти картинки:

glossyback1.gif
glossyback.gif
arrow2.gif

И наконец ищеш в main.tpl строку: <head>
после нее вставляешь этот текст:

<link rel="stylesheet" type="text/css" href="cssverticalmenu.css" />

<script type="text/javascript" src="cssverticalmenu.js">

/***********************************************

* CSS Vertical List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/ 
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

***********************************************/

Опять в main.tpl :

Ищешь <h2>Категории</h2>

И стираешь ВСЁ что написано МЕЖДУ  <h2>Категории</h2>  И  <!-- Левое меню. Конец -->

Теперь между <h2>Категории</h2> И <!-- Левое меню. Конец --> ПУСТО

сюда вставляешь этот текст:

<script type="text/javascript">
var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.

function createcssmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    var spanref=document.createElement("span")
		spanref.className="arrowdiv"
		spanref.innerHTML="&nbsp;&nbsp;"
		ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  }
}


if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)

</script>

<ul id="verticalmenu" class="glossymenu">
<li><a href="http://softoka4alka.ru/category/main/">Информация</a></li>
<li><a href="http://softoka4alka.ru/category/games/" >Игры</a></li>
<li><a href="http://softoka4alka.ru/category/films/">Фильмы</a></li>
<li><a href="http://softoka4alka.ru/category/soft/">Cофт</a>
    <ul>
    <li><a href="http://softoka4alka.ru/category/utilita/">Утилиты</a></li>
    <li><a href="http://softoka4alka.ru/category/multimedia/">Мультимедиа</a></li>
    <li><a href="http://softoka4alka.ru/category/antivirus/">Безопасность</a></li>
    </ul>
</li>
<li><a href="http://softoka4alka.ru/category/oboi/">Обои</a></li>
<li><a href="http://softoka4alka.ru/category/muzik/">Музыка</a></li>
<li><a href="http://softoka4alka.ru/category/e-booc/" >Чтиво</a>

