小云童鞋在這和大家先講下菜單實(shí)現(xiàn)原理先,，技術(shù)大牛呢你應(yīng)該比我更明白的了，此文送給剛?cè)腴T(mén)的童鞋的,，希望對(duì)他們有點(diǎn)點(diǎn)幫助,。

這時(shí)到CSS書(shū)寫(xiě)了，這里先不講怎樣美化導(dǎo)航先,，把簡(jiǎn)單的框架搭建成先,。CSS大體是這樣：ul{list-style-type:none; padding:0; margin:0;}
ul li{ float:left;}
ul li ul li{float:none;}
ul li a{width:100px; display:block; text-align:center; text-decoration:none;padding:3px 1px; background-color:#ccc;}
ul li ul a{background-color:#eee;}
ul li a:hover{ background-color:#666; color:#fff;}

這時(shí)半成品出來(lái)了

仔細(xì)的你發(fā)現(xiàn)CSS有問(wèn)題那就是定位問(wèn)題啦？別急,，后面會(huì)慢慢說(shuō),，耐心點(diǎn)哦！那我們先把下拉的菜單隱藏先，這時(shí)要改CSS了,，加上ul li ul{display:none};這行代碼就隱藏啦,！變成了呵呵……離成功不遠(yuǎn)了。現(xiàn)在問(wèn)題就出來(lái)了,。鼠標(biāo)移上去怎樣讓下拉菜單顯示呢,？這時(shí)就用到了JS了，因?yàn)镮E6是不支持li偽類(lèi)的哦,。但是我們還是先用li偽類(lèi)先哦,，為了盡快解決上面提出的定位問(wèn)題。這時(shí)加上一行CSS代碼#nav li:hover ul{display:block;}這時(shí)就實(shí)現(xiàn)了顯示下拉導(dǎo)航了,，除IE6外,。這時(shí)問(wèn)題也出來(lái)了，在導(dǎo)航后面加上些文字變成這樣把鼠標(biāo)移到菜導(dǎo)航下把網(wǎng)頁(yè)的內(nèi)容向下推動(dòng)了：

這不是我們想要的,，這就是上面CSS沒(méi)定位問(wèn)題了,，也是一定要注意的問(wèn)題，那怎樣改呢,，把ul li改成相對(duì)定位ul li{ float:left; display:block; position:relative;},，在ul li里面的那個(gè)ul（即ul  li ul )改成絕對(duì)定位ul li ul{display:none; position:absolute;}，就沒(méi)問(wèn)題了,。

這時(shí)還是不算成功,，IE6是不支持li:hover,雖然也有JS解決IE6也支持li:hover,但這里并不討論這個(gè)，所以呢還要用到JS,JQ也行,。這里就不解釋JS了,，只把代碼貼出來(lái)就OK啦！其實(shí)學(xué)習(xí)基礎(chǔ)原理很關(guān)鍵,，技術(shù)大牛都是基礎(chǔ)很過(guò)關(guān)的,。<script>
   /*用jquery實(shí)現(xiàn) $(function(){
      $(“ul>li”).hover(function(){
      $(this).find(“ul”).show();
   },function(){
      $(this).find(“ul”).hide();
   })
   })*/
   //下面是js實(shí)現(xiàn)
   var nav = document.getElementById(“nav”).childNodes;
   for (var i=0;i<nav.length;i++){
    nav[i].onmouseover = function(){fnNav(this,”block”)};
   nav[i].onmouseout = function(){fnNav(this,”none”)};
  }
   function fnNav(obj,flag)
{
 obj.getElementsByTagName(“ul”)[0].style.display = flag;
}
  </script>放在body后面，因?yàn)榧虞dDOM是從上到下的,。

呵呵……終于搞完了,，成功的實(shí)現(xiàn)了下拉導(dǎo)航。平時(shí)我們見(jiàn)到的漂亮導(dǎo)航原理都是這樣實(shí)現(xiàn)的,，只是他們定義的CSS美化導(dǎo)航了,。多級(jí)下拉導(dǎo)航原理都是這樣的。寫(xiě)完了,，收工吃飯咯,！