Кадый начинающий (и не только) ваятель сайтов сталкивается с кучей проблем при создании кнопок, менюшек и etc/
Вашему вниманию прелагается хоть и не эксклюзивный, но не отпугивающий своей сложностью вариант.
начнем с простого, с кнопки
<!--
// задаем новую кнопку
bull = new Image();
bull.src = 'img/s.gif';
//Вид при ролловере
bull_a = new Image();
bull_a.src = 'img/blue_arr.gif';


function out(imgName) {
document [imgName].src = bull_a.src // подвели мышь - меняем сырец
}

function over(imgName) {
document [imgName].src = bull.src; // убрали мышь - меняем обратно
}
// Очень просто.
// Ну а теперь слои (без них никак если очень нужно выпадающее меню)

// проверка браузера
NC = (document.layers); // Нетскейп старый (4.ХХ),
DOM=(document.getElementById)?true:false; // Круто! Document Object Model!!! (Опера, Мозилла, Нетскейп 6, Эксплорер 6)

PrevDiv = 'none'; // Имя предыдущего слоя - НОНЕ (пустой он)

//показать слой

function show(divName,img){
if (DOM)
document.getElementById(divName).style.visibility = 'visible'; //Если ДОМ - берем элемент по ИД (идентификатор для тупых  )
else if (NC)
document.layers[divName].visibility = "show";  //Если Нетскейп 4.ХХ - обращаемся к слою Лейерс, интересный глюк - он див как лейерс видит - т.е. все работает
else
document.all[divName].style.visibility = "visible"; //Это для 4-го эксплорера

PrevDiv=divName; // Ну стало быть называем слой который показывали - предыдущим (потом нужно будет)
}

//прячем энтот слой нах
function hide(divName){
if (DOM)
document.getElementById(divName).style.visibility = 'hidden'; //все те же фишки
else if (NC)
document.layers[divName].visibility = "hide";
else
document.all[divName].style.visibility = "hidden";
}

//------------------Самое интересное------------------------------------------

// Делаем слой невидимый, например: <div id="none" style="position:absolute; left:259px; top:113px; width:120px; height:200px; z-index:3; visibility: hidden"></div>
// И слои с меню <div id="имя" style="position:absolute; left:260px; top:114px; width:120px; height:200px; z-index:1; visibility: hidden"></div>
// в страничке:<a href="думми.htm" onMouseOver="menuover('название слоя','имя картинки');" onMouseOut="menuout('название слоя','имя картинки')">пункт меню</a>


var closemenu;

//показать пункт меню

function menuover(divName,img){
// необязательные (если нужно ролловеры)
    if (img !='')
    out(img);
//--------------------------------------------   
   clearTimeout(closemenu); // вычищаем переменную
   mout(); // прячем предыдущий слой
   show(divName); // показываем нужный
}
//убрать пункт меню
function menuout(divName,img){
// необязательные (если нужно ролловеры)
    if (img !='')
    over(img);
//--------------------------------------------       
   PrevDiv=divName; // обзываем этот слой предыдущим
   closemenu = setTimeout(mout, 1000); // ставим задержку (но не ту, что у девушек бывает, а ту, что не дает меню прятаться сразу)
}

function mout(){
   hide(PrevDiv); // ну это ясно - рука писать устала
}

function tum(){
closemenu = setTimeout(mout, 1000); // 1000 мс - этого хватит
}

//Это просто так - открываем окошко (например с картинками обращаемся: <a href="************big("big.jpg", 480, 320)">увеличить</a> , а в СХТМЛ-ке пишем: <img src="<!--#echo id>"> во как...)
function bigs(id,hh,ww) {
pop=window.open('big.shtml? '+id,'_blank','status=0,menubar=0,top=50,left=50,w
 idth='+ww+',height='+hh+',toolbar=0,scrollbars=0,r
esizable=0,location=0,directories=0')
}
//-->