189 8069 5689
script type="text/javascript"
成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都做网站、成都网站制作、成都外贸网站建设、信州网络推广、小程序定制开发、信州网络营销、信州企业策划、信州品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供信州建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com
var timeoutId;
$(function ()
{
$("#menu li").each(function (index)
{
$(this).mouseover(function ()
{
timeoutId = setTimeout(function ()
{
//将所有样式为contentShow的移除
$("div.contentShow").removeClass("contentShow");
//将当前的显示
$("div.content:eq(" + index + ")").addClass("contentShow").css("margin-left", (index + 0.5) * 100 + "px");
}, 300);
}).mouseout(function ()
{
clearTimeout(timeoutId);
});
});
});
/script
style type="text/css"
div.content{clear:left;display:none;}
div.contentShow{display:block;}
a{text-decoration:none;color:Black;}
A:link {COLOR: #00135b; text-decoration: none;}
A:active {COLOR: #00135b; text-decoration: none;}
A:visited {COLOR: #00135b; text-decoration: none;}
A:hover {COLOR: #ff8a00; text-decoration: none;}
/style
div
ul id="menu" style="list-style:none;"
li style=" float:left; margin:0px;cursor:pointer; width:100px; border:1px solid red;" 一/li
li style=" float:left; margin:0px;cursor:pointer; width:100px; border:1px solid red;"二/li
li style=" float:left; margin:0px;cursor:pointer; width:100px; border:1px solid red;"三/li
/ul
div style="margin-top:10px;"
div class="content"
ul style="list-style:none;"
li style="width:100px; border:1px solid blue;"a href=""一/a/li
li style="width:100px; border:1px solid blue;"a href=""二/a/li
li style="width:100px; border:1px solid blue;"a href=""三/a/li
/ul
/div
div class="content"
ul style="list-style:none;"
li style="width:100px; border:1px solid blue;"a href=""df/a/li
li style="width:100px; border:1px solid blue;"a href=""df/a/li
li style="width:100px; border:1px solid blue;"a href=""df/a/li
/ul
/div
div class="content"
ul style="list-style:none;"
li style="width:100px; border:1px solid blue;"a href=""43/a/li
li style="width:100px; border:1px solid blue;"a href=""34/a/li
li style="width:100px; border:1px solid blue;"a href=""34/a/li
/ul
/div
/div
/div
下拉菜单的默认样式在不同类型的浏览器中显示的效果非常不同，单纯的用css来统一样式可能非常有局限性，使用Jquery+css优化起来不但简单，而且实用性也非常广，主要原理为设置select透明度为0，利用css样式把span美化成select的样式，利用jquery把select选择的option的值传给span。
下面就是jquery优化下拉菜单效果的具体实现代码：
Html
a class="btn-select"
span class="cur-select"请选择/span
select class="form-control"
option这是IE浏览器下的默认显示效果/option
option这是Firefox浏览器下的默认显示效果/option
option这是Opera浏览器下的默认显示效果/option
option这是chrome浏览器下的默认显示效果/option
/select
/a
CSS
.btn-select {
position: relative;
display: block;
height:30px;
line-height: 30px;
border:1px solid #ccc;
color:#3D3F42;
}
.btn-select .cur-select {
position: absolute;
display: block;
width: 100%;
height: 25px;
line-height: 25px;
background:url(/Themes/Employee/Content/images/ico.png) no-repeat 98% 45% transparent;
text-indent: 10px;
}
.searchInselectW .store-selector .btn-select:hover{
background:#fff;
color:#3D3F42;
}
.btn-select:hover, .cur-select:hover {
color:#3D3F42;
}
.btn-select select {
position:absolute;
top:0;
left:0;
height:30px;
opacity:0;
filter:alpha(opacity=0);
}
.btn-select select option {
text-indent: 10px;
}
.btn-select select option:hover {
color: #fff;
}
Jquery
$(function(){
$(document).on("change", function() {
$("select").each(function() {
var $selectText = $(this).children("option:selected").text();
$(this).parent().find("span").text($selectText);
});
});
}
HTML 代码如下：
div id="menu"
ul
lia
href=""菜单一/a
ul
lia
href=""子菜单1/a/li
lia
href=""子菜单2/a
ullia
href=""子菜单7/a/li/ul
/li
lia href=""子菜单3/a/li
/ul
/li
lia href=""菜单二/a
ul
lia href=""子菜单4/a/li
lia
href=""子菜单5/a/li
lia
href=""子菜单6/a/li
/ul
/li
/ul
/div
CSS代码如下：
ul,ol,li{list-style:none;padding:0px;margin:0px;}
#menu
*{line-height:30px;}
#menu a{
text-decoration:none;
display:block;
}
#menu ul{
text-align:left;
background:#333;
}
#menu
.arrow{ /* 菜单项的右侧小箭头 */
float:right;
padding-right:5px;
}
#menuul{height:30px;} /* 即使没有菜单项也能保持顶级菜单栏的高度。 */
/* 一级菜单 */
#menuulli{
text-align:center;
display:inline-block;
width:80px;
}
#menuullia{color:#fff;}
#menuulli:hover{background:#666;}
/* 下拉的菜单栏 */
#menuulli ul{
display:none;
width:150px;
position:absolute;
background:#c1cd94;
box-shadow:2px 2px 2px #000;
-webkit-box-shadow:2px 2px 2px #000;
-moz-box-shadow:2px 2px 2px #123;
}
/* 下拉菜单的菜单项 */
#menuulliul li{padding-left:5px;
position:relative;}
#menuulliul lia{color:#000;}
#menuulliul li:hover{background:#d3dbb3;}
/*
三级及以下的菜单项的定位 */
#menuulliulli ul{left:150px; top:0px;}
[html]
这是JS的控制代码：
[code]
$(document).ready(function()
{
/* 菜单初始化 */
$('#menuulliul').find('li:has(ul:not(:empty))a').append("span
class='arrow'/span"); // 为有子菜单的菜单项添加''符号
$("#menuulli").bind('mouseover',function() // 顶级菜单项的鼠标移入操作
{
$(this).children('ul').slideDown('fast');
}).bind('mouseleave',function() // 顶级菜单项的鼠标移出操作
{
$(this).children('ul').slideUp('fast');
});
$('#menuulliul li').bind('mouseover',function() // 子菜单的鼠标移入操作
{
$(this).children('ul').slideDown('fast');
}).bind('mouseleave',function() // 子菜单的鼠标移出操作
{
$(this).children('ul').slideUp('fast');
});
});
能啊，一级菜单的每个li中放置一个ul，ul中的每个li下再放置一个ul，这样就三级嵌套了，你只要控制显示隐藏就好了，给三级的显示隐藏封装一个函数，在二级菜单显示的时候调用函数就可以了
使用jQuery配合Superfish制作下拉菜单需要具备以下几个参数
1、项目中需要有jQuery版本库；
2、下载Superfish插件——Superfish；
3.需要把上面两个js引入你的项目中
导入jQuery库和Superfish插件
script type="text/javascript" src="js/jquery.min.js"/script script type="text/javascript" src="js/superfish.js"/script
为了让菜单一个默认的样式，大家还可以到superfish下载superfish.css样式文件，可以直接调用
link rel="stylesheet" href="css/superfish.css" /