jquery css ul模拟列表菜单具体实现思路

复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/titlejquery用保险商实验所模拟表单挑选列表菜单效果/title脚本类型=' text/JavaScript ' src=' http :http://Ajax。谷歌API。com/Ajax/libs/jquery/1。7 .2/jquery。量滴js /脚本样式类型='text/css '！-车身{ padding:10px } * { margin:0划水：0;font-size :12 px} ul，Li { list-style-type : none；} .select _ box { width :150 pxborder :1 px固体# ccc填充-右侧：20 px填充-左侧：10 px背景： URL(107。gif)无重复160px中心；位置：相对；} .select _ box span {光标：指针；显示：块；线高：25 px宽度：100%;高度：25px飞越：隐藏；} .select _ box ul Li {光标：指针；} .son _ ul { width:179px位置：绝对；left :0 top :25 pxborder :1 px虚线# ccc背景# fff}。son _ ul li { display:block线高：25 px填充-左侧：10 px宽度：169px} .悬停{ background: # ccc} - /style脚本类型='text/javascript' $(文档)。ready(function(){ $(')).son _ ul’).hide()；//初始保险商实验所隐藏$('.select _ box span’).悬停（函数(){ //鼠标移动函数$(这个)。父项()。find('ul.son_ul ').向下滑动()；//找到ul.son_ul显示$(这个)。父项()。查找('里').悬停(function(){$(this)).addClass('hover')}，function(){$(this).removeClass(“”悬停')});//li的盘旋效果$(这个)。父项()。悬停(function(){}，function(){ $(this).父项()。find('ul.son_ul ').向上滑动()；} );}，function(){ })；$('ul.son_ul li ').单击(function(){ $(this)).父母("李")。查找(' span ').html($(this).html())；$(这个)。父母("李")。查找(' ul ').向上滑动()；});} );/script/head body ul id=' main _ box ' Li class=' select _ box ' span请选择./span ul class='son_ul' li选项一/li li选项二/li li选项三/li li选项四/li li选项五/li /ul /li /ul /body /html实现结果

打完收工！