JQ导航

代码

<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.1.3.pack.js"></script>
<style>
*{ margin:0px; padding:0px; list-style:none; }
body{ font-size:12px;   }
.nav{ float:left; clear:both; margin:100px; display:inline;  }
.nav li{ float:left; position:relative;  }
.nav li a{ display:block; width:60px; padding:8px 0px 6px; text-align:center; color:#000; background:#ccc; text-decoration:none; }
.nav li a:hover { background:#666; color:#fff; }
.nav li ul{ position:absolute; display:none;  }
.nav li ul li {  float:none; }
.nav li ul li a{ background:#eee; }
</style>
</head>
<body>
<ul id="mainNav" class="nav" >
    <li><a href="javascript:void(0);">首页</a></li>

    <li><a href="javascript:void(0);">导航菜单</a>
        <ul>
            <li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">采购</a></li>
        </ul>
    </li>

    <li><a href="javascript:void(0);" >企业采购</a>
        <ul>
            <li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">企业评测</a></li>
            <li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">企业报价</a></li>
        </ul>

    </li>

    <li><a href="javascript:void(0);">行情报价</a>
        <ul>
            <li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">导航1</a></li>
            <li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">导航2</a></li>
            <li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">导航3</a></li>
        </ul>
        </li>

</ul>
<script language="JavaScript" type="text/javascript">

</script>
</body>
</html>

posted on 2010-09-09 16:18 fxh嘟嘟阅读(1048) 评论(0) 编辑收藏举报