基于jquery的下拉列表实现

来源：互联网发布：淘宝聚划算是什么区别编辑：程序博客网时间：2024/04/29 07:47

在网上搜了一堆，不是包含的框架太多，就是太简单，所以我综合了一下，写一个目前我觉得最通俗易懂的下拉列表实现。利用absolute布局，设置div的left和top来实现下拉列表，在开发时，发现在火狐中设置td的position为absolute是无效的，所以改用li实现。

效果图：

前台代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>js下拉菜单实现</title><style>body{font-size:12px; background:#f3f4f4 url(bg.gif) repeat-x;font-family:Tahoma;}*{margin:0px;padding:0px;}.menu{text-align:center;    margin:auto;margin-top:50px;border-bottom:3px solid #E10001;width:500px;height:24px;}.menu ul{list-style:none;}.menu .top{float:left;    text-align:center;background-image:url('nav_bg2.gif');    width:87px;    position:relative;line-height:24px;height:24px;margin-left:2px;}.menu .top a{    color:black;    text-decoration:none;    font-size:18px;}.menu .top a:hover{    color:Red;}.menu .dropdown{    position:relative;}.menu .dropdown a{    display:block;}.menu .dropdowndiv{    display:none;    color:black;    position:absolute;    left:0px;    top:20px;    border:1px solid #64ace9;    background-color:White;    text-align:left;    z-index:999999;}/*利用h2做偏移挡住原先的一级标题*/.menu .dropdowndiv h2{    background-color:#fff;     border:1px solid #64ace9;    position:absolute;    top:-22px;    left:-1px;    border-bottom:0px;    font-size:100%;    font-weight:normal;text-align:center;}.menu .dropdowndiv h2 a{    color:Black;    font-size:18px;width:87px;}.menu .dropdowndiv ul{  list-style-image:none;   }.menu .dropdowndiv li{    list-style:none;   padding-left:10px;   padding-top:4px;   margin-left:4px;   background-repeat:no-repeat;   background-position:left center;   height:25px;   line-height:25px;   text-align:left;    z-index:999999;}.menu .dropdowndiv li a{    color:black;    font-size:14px;}</style><script src="jquery-1.4.1.min.js"></script><script>$(document).ready(function () {$(".dropdown").mouseover(function () {var ddv = $(this).find(".dropdowndiv");$(ddv).show();});$(".dropdown").mouseout(function () {var ddv = $(this).find(".dropdowndiv");$(ddv).hide();});});</script></head><body><div class="menu"><ul><li class="top"><a href="#" target="_self">首页</a></li><li class="top dropdown"><a href="#" target="_self">菜单1</a><div class="dropdowndiv" style="width:120px;"><h2><a href="#" target="_self">菜单1</a></h2><ul><li><a href="#">菜单1-1</a></li><li><a href="#">菜单1-2</a></li> <li><a href="#">菜单1-3</a></li></ul></div></li><li class="top"><a href="#" target="_self">菜单2</a></td><li class="top dropdown"><!--火狐不支持td的position--><a href="#" target="_self">菜单3</a><div class="dropdowndiv" style="width:120px;"><h2><a href="#" target="_self">菜单3</a></h2><ul><li><a href="#">菜单3-1</a></li><li><a href="#">菜单3-2</a></li> <li><a href="#">菜单3-3</a></li></ul></div></li></ul></div></body></html>

代码下载:http://download.csdn.net/detail/tomatozq/4801118