以前经常看见网站有菜单的显示，鼠标移上去就出现下拉的效果，很绚丽，经过看JQuery视频后，发现实现也挺容易的。

Html中，通过

• 和
• 标签将所需的元素写出来。

  代码如下:

  • 菜单项1

    • 子菜单项11

    • 子菜单项12

  • 菜单项2

    • 子菜单项21

    • 子菜单项22

  • 菜单项3

    • 子菜单项31

    • 子菜单项32

  最外围的

  • 中元素
  • 即为菜单项1、菜单项2、菜单项3，下拉菜单分别在各主菜单之下，如果菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构建多层的菜单。

    CSS中

    代码如下:

    ul,li{

    /*清除ul和li上的小圆点*/

    list-style:none;

    }

    ul{

    /*清除子菜单的缩进值*/

    padding:0;

    margin:0;

    }

    .hmain{

    background-image:url(../images/title.gif); //前面的小三角

    background-repeat:repeat-x;

    width:120px;

    }

    li{

    background-color:#EEEEEE; //背景图片覆盖背景色

    }

    a{

    //取消所有的下划线

    text-decoration:none;

    padding-left:20px;

    display:block; /*块集元素可充满区域*/

    display:inline-block;

    width:100px;

    padding-top:3px;

    padding-bottom:3px;

    }

    .hmain a{

    color:white;

    background-image:url(../images/collapsed.gif);

    background-repeat:no-repeat;

    background-position:3px center;

    }

    .hmain li a{

    color:black;

    background-image:none;

    }

    .hmain ul{

    display:none;

    }

    .hmain{

    float:left;

    margin-right:1px;

    }

    unity http://www.unitymanual.com/

    Html中引用js文件jquery.js和menu.js,其中menu.js如下：

    代码如下:

    $(document).ready(function(){

    //页面中的DOM已经装载完成时，执行的代码

    $(".main> a,.hmain a").click(function(){

    //找到主菜单项对应的子菜单项

    var ulNode=$(this).next("ul");

    ulNode.slideToggle();

    changeIcon($(this));

    });

    $(".hmain").hover(function(){

    $(this).children ("ul").slideToggle();

    changeIcon($(this).children("a"));

    },function(){

    $(this).children("ul").slideToggle();

    changeIcon($(this).children("a"));

    });

    });

    /*

    *修改主菜单的指示图标

    */

    function changeIcon(mainNode){

    if(mainNode){

    if(mainNode.css("background-image").indexOf("collapsed.gif")>=0){

    mainNode.css("background-image","url('images/expanded.gif')");

    }else{

    mainNode.css("background-image","url('images/collapsed.gif')");

    }

    }

    }

    这样绚丽的下拉菜单就完成了。实现很简单，不过里面的小知识点很零碎。例如：.main a和.main>a的不同之处，前者选择使用.main的这个class的元素内容所有的a节点，后者只选择.main的子节点中的a节点。

    这样的例子应用性很强，在网站中使用让界面显得更加的美观，例子才看3个，抓紧时间继续看.