*效果如圖

當滑鼠放在全部分類這裡時，自動彈出導航表單。當滑鼠離開時，顯示的是相關的網頁內容

*說明：

程式碼只給出js的部分，相關css和html佈局只是簡單的呃button和對應的div而已

原理就是利用dom獲取button控制元件和div控制元件，div的display設定為none；當button的onmouseover事件觸發時改變div的display狀態從而實現動態切換顯示。但這裡有個問題，就是當滑鼠放在button彈出div時，滑鼠離開button移動到div上,這時候div也不應該隱藏，只有當滑鼠同時離開這兩個控制元件的時候div才隱藏。具體看程式碼 //控制元件載入監控部分。

//變數區
    var oTypeButton=document.getElementById("allbook_type_button");
    var oBookTypeDiv=document.getElementById("all_type_book");
    var oBookTypeLeftDiv=document.getElementById("leftbox");
    var oBookTypeLeftLi=oBookTypeLeftDiv.getElementsByTagName("li");
    var oBookTypeRightDiv=oBookTypeDiv.getElementsByTagName("div");
var oBookTypeRightUl=oBookTypeRightDiv[1].getElementsByTagName("ul");

 

//函式區
function booktypeul_none(){
      for(var j=0;j<oBookTypeRightUl.length;j++)
      {
        oBookTypeRightUl[j].style.border="";

      }
}

function booktypeul_show(obj1,i){
    obj1.onmouseover=function(){
      booktypeul_none();
      if(obj1!=oBookTypeLeftLi[0])
      oBookTypeRightUl[i].style.border="1px solid #EBE4E4";
  }
}
 

//控制元件載入監聽
window.onload=function(){
  //------------booktype_button
  oTypeButton.onmouseover=function(){
    booktypeul_none();
    oBookTypeDiv.style.display="block";
    oBookTypeRightDiv[1].style.display="block";
  }
  oBookTypeDiv.onmouseover=function(){
    oBookTypeDiv.style.display="block";
  }
 oTypeButton.onmouseout=function(){
   oBookTypeDiv.style.display="none";
  }
  oBookTypeDiv.onmouseout=function(){
       oBookTypeDiv.style.display="none";
  }

   oBookTypeLeftLi[0].onmouseout=function(){
       oBookTypeRightUl[0].style.border="none";
  }

  for(var i=1;i<oBookTypeLeftLi.length;i++)
  {
    booktypeul_show(oBookTypeLeftLi[i],(i-1)%9);
  }  
}