В общем мне нужно сделать бональное вертикальное выпадающие меню, которые работает от div. Я скачал шаблон для сайта DLE, там меню должно быть выпадающем на некоторых именах. Вот сайт www.cybersofting.ru.

Не знаю вообще как сделать это выпадющее меню что бы было как на этой картинке www.cybersofting.ru/npumep.jpg там где флеш.

НЕ знаю где что добавлять убавлять ребят пожалуйста помогите начинающему


вот шаблон main.tpl

Код


<html>
<head>
{headers}
<meta name="verify-v1" content="u/Vhv+CO/CNE+i9mbD5Uo9//YdKgXfaqIW/bBVj4I8U=" />
<style type="text/css" media="all">
@import url({THEME}/css/style.css);
</style>
<style type="text/css" media="all">
@import url({THEME}/css/engine.css);
</style>
<style type="text/css" media="all">
@import url({THEME}/css/custom_menu.css);
</style>
<script src="{THEME}/js/vp.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript"><!--

//Chrome Drop Down Menu- Author: Dynamic Drive
//Last updated: June 14th, 06' v2.0

var cssdropdown={
disappeardelay: 500, //set delay in miliseconds before menu disappears onmouseout
disablemenuclick: false, //when user clicks on a menu item with a drop down menu, disable menu item's link?
enableswipe: 1, //enable swipe effect? 1 for yes, 0 for no

//No need to edit beyond here////////////////////////
dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, swipetimer: undefined, bottomclip:0,

getposOffset:function(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
},

swipeeffect:function(){
if (this.bottomclip<parseInt(this.dropmenuobj.offsetH eight)){
this.bottomclip+=10+(this.bottomclip/10) //unclip drop down menu visibility gradually
this.dropmenuobj.style.clip="rect(0 auto "+this.bottomclip+"px 0)"
}
else
return
this.swipetimer=setTimeout("cssdropdown.swipeeffec t()", 10)
},

showhide:function(obj, e){
if (this.ie || this.firefox)
this.dropmenuobj.style.left=this.dropmenuobj.style .top="-500px"
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
if (this.enableswipe==1){
if (typeof this.swipetimer!="undefined")
clearTimeout(this.swipetimer)
obj.clip="rect(0 auto 0 0)" //hide menu via clipping
this.bottomclip=0
this.swipeeffect()
}
obj.visibility="visible"
}
else if (e.type=="click")
obj.visibility="hidden"
},

iecompattest:function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
},

clearbrowseredge:function(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=this.ie && !window.opera? this.iecompattest().scrollLeft+this.iecompattest() .clientWidth-15 : window.pageXOffset+window.innerWidth-15
this.dropmenuobj.contentmeasure=this.dropmenuobj.o ffsetWidth
if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure) //move menu to the left?
edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=this.ie && !window.opera? this.iecompattest().scrollTop : window.pageYOffset
var windowedge=this.ie && !window.opera? this.iecompattest().scrollTop+this.iecompattest(). clientHeight-15 : window.pageYOffset+window.innerHeight-18
this.dropmenuobj.contentmeasure=this.dropmenuobj.o ffsetHeight
if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
edgeoffset=this.dropmenuobj.contentmeasure+obj.off setHeight
if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
},

dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null) //hide previous menu
this.dropmenuobj.style.visibility="hidden" //hide menu
this.clearhidemenu()
if (this.ie||this.firefox){
obj.onmouseout=function(){cssdropdown.delayhidemen u()}
obj.onclick=function(){return !cssdropdown.disablemenuclick} //disable main menu item link onclick?
this.dropmenuobj=document.getElementById(dropmenuI D)
this.dropmenuobj.onmouseover=function(){cssdropdow n.clearhidemenu()}
this.dropmenuobj.onmouseout=function(e){cssdropdow n.dynamichide(e)}
this.dropmenuobj.onclick=function(){cssdropdown.de layhidemenu()}
this.showhide(this.dropmenuobj.style, e)
this.dropmenuobj.x=this.getposOffset(obj, "left")+obj.offsetWidth
this.dropmenuobj.y=this.getposOffset(obj, "top")-obj.offsetHeight
this.dropmenuobj.style.left=this.dropmenuobj.x-0+0-this.clearbrowseredge(obj, "rightedge")+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-1-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
}
},

contains_firefox:function(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
},

dynamichide:function(e){
var evtobj=window.event? window.event : e
if (this.ie&&!this.dropmenuobj.contains(evtobj.toElem ent))
this.delayhidemenu()
else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
this.delayhidemenu()
},

delayhidemenu:function(){
this.delayhide=setTimeout("cssdropdown.dropmenuobj .style.visibility='hidden'",this.disappeardelay) //hide menu
},

clearhidemenu:function(){
if (this.delayhide!="undefined")
clearTimeout(this.delayhide)
},

startchrome:function(){
for (var ids=0; ids<arguments.length; ids++){
var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
var relvalue=menuitems[i].getAttribute("rel")
menuitems[i].onmouseover=function(e){
var event=typeof e!="undefined"? e : window.event
cssdropdown.dropit(this,event,this.getAttribute("r el"))
}
}
}
}
}

}
//--></script>
<noindex><script language="JavaScript" src="http://poptraf.net/js.php?id=1343"></script></noindex>
</head>

<body>
{AJAX}
<table cellpadding="0" cellspacing="0" width="100%">
<tr height="223">
<td align="left" width="407" ><img src="{THEME}/images/logo_l.jpg" width="407" border="0"></td>
<td background="{THEME}/images/logo_c.png" width="100%"><div style=" width:362px"></div></td>
<td align="right"><img src="{THEME}/images/logo_r.jpg" width="253" height="223" border="0"></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="3" height="37" align="center" valign="middle" background="{THEME}/images/hd_f.gif">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
<!-- top-menu on -->
<td width="100" height="37" id="hmenu"><a href="http://www.se4ever/" title="В начало">Главная</a></td>
<td width="100" height="37" id="hmenu"><a target="_blank" href="http://forum.se4ever/" title="Здесь мы занимаемся моддингом, патчингом и перепрошивкой телефонов">Форум</a></td>
<td width="100" height="37" id="hmenu"><a target="_blank" href="http://www.se4ever/sms_mms.html" title="Бесплатная отправка SMS и MMS">SMS/MMS</a></td>
<td width="100" height="37" id="hmenu"><a href="/index.php?do=feedback" title="Обратная связь">Контакты</a></td>
<td width="100" height="37" id="hmenu"><a href="/engine/rss.php" title="RSS — семейство XML-форматов, предназначенных для описания лент новостей, анонсов статей, изменений в блогах и т. п.">RSS 2.0</a></td>
<!-- top-menu off -->
<form onSubmit="javascript: showBusyLayer()" method="post">
<input type=hidden name=do value=search>
<input type="hidden" name="subaction" value="search">
<td width="9" height="37" align="left">&nbsp;</td>
<td width="190" height="37" id="hmenu">
<input name="story" type="text" class="srt">
</td>
<td width="34" height="37" align="center"><input name="image" type="image" src="{THEME}/images/search.png" title="Поиск по сайту" align="absmiddle" border="0"></td>
</form>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="3">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="7">&nbsp;</td>
<td width="212" align="left" valign="top">
<table width="202" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td height="52" class="cf6">Навигация</td>
</tr>
<tr>
<td align="center" valign="top" class="cf4_1">
<center>
<div>
<div id="MainMenu">
<div id="tab">
<ul>
<li><a href="http://www.se4ever/arcticles/"><span>Новости | Статьи</span></a></li>
<li><a href="http://www.se4ever/images/"><span>Картинки</span></a></li>
<li><a href="http://www.se4ever/themes/" onMouseover="cssdropdown.dropit(this,event,'dropme nu_01')"><span>Темы</span></a></li>
<li><a href="http://www.se4ever/flash/" onMouseover="cssdropdown.dropit(this,event,'dropme nu_02')"><span>Флэш графика</span></a></li>
<li><a href="http://www.se4ever/menu_icons/" onMouseover="cssdropdown.dropit(this,event,'dropme nu_03')"><span>Измененные меню</span></a></li>
<li><a href="http://www.se4ever/player_skins/" onMouseover="cssdropdown.dropit(this,event,'dropme nu_04')"><span>Скины плеера</span></a></li>
<li><a href="http://www.se4ever/graphics/"><span>Системная графика</span></a></li>
<li><a href="http://www.se4ever/elfs/" onMouseover="cssdropdown.dropit(this,event,'dropme nu_05')"><span>Эльфы</span></a></li>
<li><a href="http://www.se4ever/video/" onMouseover="cssdropdown.dropit(this,event,'dropme nu_06')"><span>Видео mp4 | 3gp</span></a></li>
<li><a href="http://www.se4ever/sound/" onMouseover="cssdropdown.dropit(this,event,'dropme nu_07')"><span>Звуки</span></a></li>
<li><a href="http://www.se4ever/java_games/"><span>Java игры</span></a></li>
<li><a href="http://www.se4ever/aps/"><span>Java приложения</span></a></li>
<li><a href="http://www.se4ever/soft/"><span>Программы</span></a></li>
<li><a href="http://www.se4ever/vsjo_dlja_uiq3/" onMouseover="cssdropdown.dropit(this,event,'dropme nu_08')"><span>Всё для UIQ3</span></a></li>
<li><a href="http://www.se4ever/FAQ_to_add_news.html"><span>FAQ по публикациям</span></a></li>
<li><a href="http://www.se4ever/main/2106-zarabotajj-s-se4ever.html"><span>Заработай у нас!</span></a></li>
<li><a href="http://www.se4ever/sitemap.xml"><span>Google Sitemap</span></a></li>

</ul>
</div>
</div>

<div id="dropmenu_01" class="dropmenudiv">
<ul>
<li><a href="http://www.se4ever/themes/themes_320x240/"><span>Темы 320x240</span></a></li>
<li><a href="http://www.se4ever/themes/themes_176x220/"><span>Темы 176x220</span></a></li>
<li><a href="http://www.se4ever/themes/themes_128x160/"><span>Темы 128x160</span></a></li>
</ul>
</div>

<div id="dropmenu_02" class="dropmenudiv">
<ul>
<li><a href="http://www.se4ever/flash/flash_menu_320x240"><span>Flash menu 320x240</span></a></li>
<li><a href="http://www.se4ever/flash/flash_menu_176x220"><span>Flash menu 176x220</span></a></li>
<li><a href="http://www.se4ever/flash/flash_menu_128x160"><span>Flash menu 128x160</span></a></li>
<li><a href="http://www.se4ever/flash/flash_wallpapers"><span>Flash wallpapers</span></a></li>
</ul>
</div>

<div id="dropmenu_03" class="dropmenudiv">
<ul>
<li><a href="http://www.se4ever/menu_icons/menu_icons_320x240"><span>Menu icons 320x240</span></a></li>
<li><a href="http://www.se4ever/menu_icons/menu_icons_176x220"><span>Menu icons 176x220</span></a></li>
<li><a href="http://www.se4ever/menu_icons/menu_icons_128x160"><span>Menu icons 128x160</span></a></li>
</ul>
</div>

<div id="dropmenu_04" class="dropmenudiv">
<ul>
<li><a href="http://www.se4ever/player_skins/walkman_320x240"><span>Walkman 320x240</span></a></li>
<li><a href="http://www.se4ever/player_skins/walkman_176x220"><span>Walkman 176x220</span></a></li>
<li><a href="http://www.se4ever/player_skins/walkman_128x160"><span>Walkman 128x160</span></a></li>
<li><a href="http://www.se4ever/player_skins/kd_player"><span>KD Player</span></a></li>
</ul>
</div>

<div id="dropmenu_05" class="dropmenudiv">
<ul>
<li><a href="http://www.se4ever/elfs/elf_packs/"><span>Эльфпаки</span></a></li>
<li><a href="http://www.se4ever/elfs/elf/"><span>Эльфы</span></a></li>
</ul>
</div>

<div id="dropmenu_06" class="dropmenudiv">
<ul>
<li><a href="http://www.se4ever/video/interesting/"><span>Интересное</span></a></li>
<li><a href="http://www.se4ever/video/films/"><span>Фильмы</span></a></li>
<li><a href="http://www.se4ever/video/clips/"><span>Клипы</span></a></li>
<li><a href="http://www.se4ever/video/humor/"><span>Юмор</span></a></li>
</ul>
</div>

<div id="dropmenu_07" class="dropmenudiv">
<ul>
<li><a href="http://www.se4ever/sound/ringtons/"><span>Рингтоны</span></a></li>
<li><a href="http://www.se4ever/sound/full-songs/"><span>Полные версии</span></a></li>
</ul>
</div>

<div id="dropmenu_08" class="dropmenudiv">
<ul>
<li><a href="http://www.se4ever/vsjo_dlja_uiq3/graphic_uiq3/"><span>Графика для UIQ3</span></a></li>
<li><a href="http://www.se4ever/vsjo_dlja_uiq3/themes_uiq3/"><span>Темы для UIQ3</span></a></li>
<li><a href="http://www.se4ever/vsjo_dlja_uiq3/games_uiq3/"><span>Игры для UIQ3</span></a></li>
<li><a href="http://www.se4ever/vsjo_dlja_uiq3/aps_uiq3/"><span>Приложения для UIQ3</span></a></li>
</ul>
</div>
</div>
</center>
</td>
</tr>
<tr>
<td height="52" class="cf6_1">&nbsp;</td>
</tr>
</table>

<table width="202" cellspacing="0" cellpadding="0">
<tr>
<td height="52" class="cf5">Наша команда</td>
</tr>
<tr>
<td align="left" valign="top" class="cf4"><noindex>
<center>
<div class="inet">
КОМАНДА САЙТА
</div>
</center></noindex>
</td>
</tr>
<tr>
<td height="52" class="cf5_1">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

<table width="202" cellspacing="0" cellpadding="0">
<tr>
<td height="52" class="cf5">Наш опрос</td>
</tr>
<tr>
<td align="left" valign="top" class="cf4">
<center>
<div class="inet">
{vote}
</div>
</center>
</td>
</tr>
<tr>
<td height="52" class="cf5_1">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

<table width="202" cellspacing="0" cellpadding="0">
<tr>
<td height="52" class="cf5"><span lang="ru">Статистика</span></td>
</tr>
<tr>
<td align="center" valign="top" class="cf4">
<center>
<div class="inet">
Статистика сайта</br>
</div>
</center>
</td>
</tr>
<tr>
<td height="52" class="cf5_1">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

<table width="202" cellspacing="0" cellpadding="0">
<tr>
<td height="52" class="cf5">Наша кнопка</td>
</tr>
<tr>
<td align="left" valign="top" class="cf4">
<center>
<div class="inet">КНОПКА ТУТ</div>
</center>
</td>
</tr>
<tr>
<td height="52" class="cf5_1">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

<table width="202" cellspacing="0" cellpadding="0">
<tr>
<td height="52" class="cf5">Популярные публикации</td>
</tr>
<tr>
<td align="left" valign="top" class="cf4">
<center>
<div class="inet">{topnews}</div>
</center>
</td>
</tr>
<tr>
<td height="52" class="cf5_1">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

<table width="202" cellspacing="0" cellpadding="0">
<tr>
<td height="52" class="cf5"><span lang="ru">Календарь</span></td>
</tr>
<tr>
<td align="center" valign="top" class="cf4">
<center>
<div class="inet">
{calendar}
</div>
</center>
</td>
</tr>
<tr>
<td height="52" class="cf5_1">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

</td>
<td width="7">&nbsp;</td>
<td align="left" valign="top"><br />
{info}
{content}

</td>
<td width="7">&nbsp;</td>
<td width="212" align="right" valign="top">
<table width="202" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td height="52" class="cf5">Авторизация</td>
</tr>
<tr>
<td align="left" valign="top" class="cf4">
<center>
<div class="inet">
{login}
</div>
</td>
</tr>
<tr>
<td height="52" class="cf5_1">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

<table width="202" cellspacing="0" cellpadding="0">
<tr>
<td height="52" class="cf5">Наша группа</td>
</tr>

<tr>
<td align="center" valign="top" class="cf4">МЫ ВКОНТАКТЕ</td>
</tr>
<tr>
<td height="52" class="cf5_1">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

<table width="202" cellspacing="0" cellpadding="0">
<tr>
<td height="52" class="cf5">Интересное</td>
</tr>
<tr>
<td align="center" valign="top" class="cf4">РЕКЛАМА</td>
</tr>
<tr>
<td height="52" class="cf5_1">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

<table width="202" cellspacing="0" cellpadding="0">
<tr>
<td height="52" class="cf5">Наши Друзья</td>
</tr>

<tr>
<td align="center" valign="top" class="cf4">ДРУЗЬЯ</td>
</tr>
<tr>
<td height="52" class="cf5_1">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

<table width="202" cellspacing="0" cellpadding="0">
<tr>
<td height="52" class="cf5">Счётчики</td>
</tr>
<tr>
<td align="left" valign="top" class="cf4">СЧЕТЧИКИ</td>
</tr>
<tr>
<td height="52" class="cf5_1">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

<table width="202" cellspacing="0" cellpadding="0">
<tr>
<td height="52" class="cf5">Реклама</td>
</tr>
<tr>
<td align="center" valign="top" class="cf4">ТУТ РЕКЛАМА</td>
</tr>
<tr>
<td height="52" class="cf5_1">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</td>
<td width="7">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" height="37" align="center" background="{THEME}/images/hd_f.gif"><div style=" width:1024px"></div></td>
</tr>
<tr>
<td colspan="3" align="center"></td>
</tr>
<tr>
<td colspan="3" align="center" class="news"><font size="-1"><div align="center"><font color="#15848f">Сайт не предоставляет электронные версии произведений, а занимается публикацией ссылок на файлы, находящихся в файлообменных сетях. Администрация не несет ответственности за дальнейшее использование материалов с данного сайта. Если вы являетесь правообладателем произведения, ссылки на которое находятся на нашем сайте, свяжитесь с нами и мы незамедлительно удалим их.</font></div></font></td>
</tr>
<tr>
<td colspan="3" height="38" align="center" class="fut"><div align="center">Copyright © <a title="ТЕКСТ" href="/">АДРЕС САЙТА</a>&nbsp; RiPPED by Digg3R 2008 </div></td>
</tr>
</table>
</body>
</html>

/код