<!DOCTYPE html>
<html lang="zh-CH">
<head>
<meta charset="utf-8" />
<title>jquery menu</title>
<!--<link  href="css/nav.css" rel="stylesheet">-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/jquery-1.4.4.min.js" language="javascript"></script>
<style>
body {
    text-align:center;
}
nav {
    display:block;
    margin:0 auto;
}
nav * {
    list-style-type:none;
}
nav ul {
    width:960px;
    background-color:#0C3;
    height:25px;
    line-height:25px;
    margin:0 auto;
    padding:0;
    position:relative;
}
nav ul li {
    background-color:red;
    height:25px;
    line-height:25px;
    float:left;
    padding:0px;
    width:100px;
}
nav ul li a {
    display:block;
    text-decoration:none;
    color:#FFF;
}
nav ul li a:hover{
    color:#CCC;}
nav ul li ul {
    display:none;
    padding:0;
    margin:0;
    background-color:#FFFFFF;
    position:absolute;
}
nav ul li ul li{
    background-color:#3F0;
    margin:0;
    padding:0;
}
#insertImg{
    margin-top:50px;}
</style>
<script>
    $(function(){
        /*菜单jquery*/
        $(".nav").hover(function(){
            $(this).children("ul").show();
            $(this).children("a").css("background-color","#60C");
        },function(){
            $(this).children("ul").hide();
            $(this).children("a").css("background-color","red");
        });
        /*插入图片*/
        var pics = "";
        for(var i=1; i<10; i++){
            pics+='<a href="#"><img src="img/'+i+'.jpg" style="width:100px;height:50px;border:1px solid #ccc;padding:5"/></a>';
        }    
        $("#insertImg").html(pics);
    })
</script>
</head>
<body>
<!--菜单-->
<nav>
  <ul>
    <li class="nav"> <a href="#">首页</a>
      <ul>
        <li><a href="#">首页1</a></li>
        <li><a href="#">首页2</a></li>
        <li><a href="#">首页3</a></li>
      </ul>
    </li>
    <li class="nav"> <a href="#">产品</a>
      <ul>
        <li><a href="#">产品1</a></li>
        <li><a href="#">产品2</a></li>
        <li><a href="#">产品3</a></li>
      </ul>
    </li >
    <li class="nav"> <a href="#">服务</a>
      <ul>
        <li><a href="#">服务1</a></li>
        <li><a href="#">服务2</a></li>
        <li><a href="#">服务3</a></li>
      </ul>
    </li>
    <li class="nav"> <a href="#">关于</a> </li>
  </ul>
</nav>
<!--动态插入图片-->
<div id="insertImg"></div>
</body>
</html>