九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

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

這時(shí)到CSS書寫了，這里先不講怎樣美化導(dǎo)航先，把簡單的框架搭建成先。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í)半成品出來了

仔細(xì)的你發(fā)現(xiàn)CSS有問題那就是定位問題啦？別急，后面會(huì)慢慢說，耐心點(diǎn)哦！那我們先把下拉的菜單隱藏先，這時(shí)要改CSS了，加上ul li ul{display:none};這行代碼就隱藏啦！變成了

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

這時(shí)還是不算成功，IE6是不支持li:hover,雖然也有JS解決IE6也支持li:hover,但這里并不討論這個(gè)，所以呢還要用到JS,JQ也行。這里就不解釋JS了，只把代碼貼出來就OK啦！其實(shí)學(xué)習(xí)基礎(chǔ)原理很關(guān)鍵，技術(shù)大牛都是基礎(chǔ)很過關(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í)我們見到的漂亮導(dǎo)航原理都是這樣實(shí)現(xiàn)的，只是他們定義的CSS美化導(dǎo)航了。多級(jí)下拉導(dǎo)航原理都是這樣的。寫完了，收工吃飯咯！