js二级下拉菜单代码（html+js+css代码没有如期效果，新手【二级联动下拉菜单】）

本文目录

• html+js+css代码没有如期效果，新手【二级联动下拉菜单】
• 谁能提供一个能用的二级联动下拉菜单
• 一段js下拉菜单代码，我想二级菜单在上面向上弹出请问怎么修改
• 用js写一个延迟下拉的二级菜单
• 下拉菜单控制二级下拉菜单显示与隐藏JS代码
• 关于下拉菜单的JS代码
• js二级联动下拉列表菜单

html+js+css代码没有如期效果，新手【二级联动下拉菜单】

《head》
《meta charset=“UTF-8“》
《title》《/title》
《style type=“text/css“》
    html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  background: #fafafa;
  font-family: “Roboto“, sans-serif;
  font-size: 14px;
  margin: 0;
}
a {
  text-decoration: none;
}
.container {
  width: 1000px;
  margin: auto;
}
/* Navigation Styles */
nav {
  background: #2ba0db;
}
nav ul {
  font-size: 0;
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline-block;
  position: relative;
}
nav ul li a {
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 15px 14px;
  transition: 0.3s linear;
}
nav ul li:hover {
  background: #126d9b;
}
nav ul li ul {
  border-bottom: 5px solid #2ba0db;
  display: none;
  position: absolute;
  width: 250px;
}
nav ul li ul li {
  border-top: 1px solid #444;
  display: block;
}
nav ul li ul li:first-child {
  border-top: none;
}
nav ul li ul li a {
  background: #373737;
  display: block;
  padding: 10px 14px;
}
nav ul li ul li a:hover {
  background: #126d9b;
}
nav .fa.fa-angle-down {
  margin-left: 6px;
}
    《/style》
 《script src=“http://code.jquery.com/jquery-2.1.1.min.js“》《/script》
《script type=“text/javascript“》
$(document).ready(function(){
    $(’.navs li’).hover(function(){
        $(this).find(“.submenu“).stop(true,true).slideDown(500);
    },function(){
        $(this).find(“.submenu“).slideUp();
    });
});
《/script》
《/head》
《body》
《nav》
《div class=“container“》
《ul class=“navs“》
《li》
《a href=“#“》Home《/a》
《/li》
《li》
《a href=“#“》About Us《/a》
《/li》
《li》
《a href=“#“》
Categories 《i class=’fa fa-angle-down’》《/i》
《/a》
《ul class=“submenu“》
《li》
《a href=“#“》Category One《/a》
《/li》
《li》
《a href=“#“》Category Two《/a》
《/li》
《li》
《a href=“#“》Category Three《/a》
《/li》
《/ul》
《/li》
《li class=’sub-menu’》
《a href=“#“》
Services 《i class=’fa fa-angle-down’》《/i》
《/a》
《ul class=“submenu“》
《li》
《a href=“#“》Service One《/a》
《/li》
《li》
《a href=“#“》Service Two《/a》
《/li》
《li》
《a href=“#“》Service Three《/a》
《/li》
《li》
《a href=“#“》Service Four《/a》
《/li》
《li》
《a href=“#“》Service Five《/a》
《/li》
《li》
《a href=“#“》Service Six《/a》
《/li》
《/ul》
《/li》
《li》
《a href=“#“》Contact Us《/a》
《/li》
《/ul》
《/div》
《/nav》

你是不是没有加上jquery的版本啊，你可以选着在本地链接一个jquery库，或者像我这样加上一个cdn加速的服务器上的jquery，然后将你的js代码改掉了，建议你给标签加上class属性这样好控制其样式和js

谁能提供一个能用的二级联动下拉菜单

先给你一个参考地址:
http://www.xfbbs.com/ArticleShow/3/Article_Show_48921.html

一 .先准备个js文件,给他个美名为:area.js(并把他放到文件夹js下)js下载

area.js代码:

function Dsy()
{
this.Items = {};
}
Dsy.prototype.add = function(id,iArray)
{
this.Items[id] = iArray;
}
Dsy.prototype.Exists = function(id)
{
if(typeof(this.Items[id]) == “undefined“) return false;
return true;
}

function change(v){
var str=“0“;
for(i=0;i《v;i++){ str+=(“_“+(document.getElementById(s[i]).selectedIndex-1));};
var ss=document.getElementById(s[v]);
with(ss){
length = 0;
options=new Option(opt0[v],opt0[v]);
if(v && document.getElementById(s[v-1]).selectedIndex》0 || !v)
{
if(dsy.Exists(str)){
ar = dsy.Items[str];
for(i=0;i《ar.length;i++)options[length]=new Option(ar[i],ar[i]);
if(v)options.selected = true;
}
}
if(++v《s.length){change(v);}
}
}

var dsy = new Dsy();

dsy.add(“0“,[“安徽“,“北京“,“福建“,“甘肃“,“广东“,“广西“,“贵州“,“海南“,“河北“,“河南“,“黑龙江“,“湖北“,“湖南“,“吉林“,“江苏“,“江西“,“辽宁“,“内蒙古“,“宁夏“,“青海“,“山东“,“山西“,“陕西“,“上海“,“四川“,“天津“,“西藏“,“新疆“,“云南“,“浙江“,“重庆“]);

dsy.add(“0_0“,[“安庆“,“蚌埠“,“巢湖“,“池州“,“滁州“,“阜阳“,“合肥“,“淮北“,“淮南“,“黄山“,“六安“,“马鞍山“,“宿州“,“铜陵“,“芜湖“,“宣城“,“亳州“]);
dsy.add(“0_0_0“,[“安庆市“,“怀宁县“,“潜山县“,“宿松县“,“太湖县“,“桐城市“,“望江县“,“岳西县“,“枞阳县“]);
dsy.add(“0_0_1“,[“蚌埠市“,“固镇县“,“怀远县“,“五河县“]);
dsy.add(“0_0_2“,[“巢湖市“,“含山县“,“和县“,“庐江县“,“无为县“]);
dsy.add(“0_0_3“,[“池州市“,“东至县“,“青阳县“,“石台县“]);
dsy.add(“0_0_4“,[“滁州市“,“定远县“,“凤阳县“,“来安县“,“明光市“,“全椒县“,“天长市“]);
dsy.add(“0_0_5“,[“阜南县“,“阜阳市“,“界首市“,“临泉县“,“太和县“,“颖上县“]);
dsy.add(“0_0_6“,[“长丰县“,“肥东县“,“肥西县“]);
dsy.add(“0_0_7“,[“淮北市“,“濉溪县“]);
dsy.add(“0_0_8“,[“凤台县“,“淮南市“]);
dsy.add(“0_0_9“,[“黄山市“,“祁门县“,“休宁县“,“歙县“,“黟县“]);
dsy.add(“0_0_10“,[“霍邱县“,“霍山县“,“金寨县“,“六安市“,“寿县“,“舒城县“]);
dsy.add(“0_0_11“,[“当涂县“,“马鞍山市“]);
dsy.add(“0_0_12“,[“灵璧县“,“宿州市“,“萧县“,“泗县“,“砀山县“]);
dsy.add(“0_0_13“,[“铜陵市“,“铜陵县“]);
dsy.add(“0_0_14“,[“繁昌县“,“南陵县“,“芜湖市“,“芜湖县“]);
dsy.add(“0_0_15“,[“广德县“,“绩溪县“,“郎溪县“,“宁国市“,“宣城市“,“泾县“,“旌德县“]);
dsy.add(“0_0_16“,[“利辛县“,“蒙城县“,“涡阳县“,“亳州市“]);

dsy.add(“0_1“,[“北京“]);
dsy.add(“0_1_0“,[“北京市“,“密云县“,“延庆县“]);

dsy.add(“0_2“,[“福州“,“龙岩“,“南平“,“宁德“,“莆田“,“泉州“,“三明“,“厦门“,“漳州“]);
dsy.add(“0_2_0“,[“长乐市“,“福清市“,“福州市“,“连江县“,“罗源县“,“闽侯县“,“闽清县“,“平潭县“,“永泰县“]);
dsy.add(“0_2_1“,[“长汀县“,“连城县“,“龙岩市“,“上杭县“,“武平县“,“永定县“,“漳平市“]);
dsy.add(“0_2_2“,[“光泽县“,“建阳市“,“建瓯市“,“南平市“,“浦城县“,“邵武市“,“顺昌县“,“松溪县“,“武夷山市“,“政和县“]);
dsy.add(“0_2_3“,[“福安市“,“福鼎市“,“古田县“,“宁德市“,“屏南县“,“寿宁县“,“霞浦县“,“周宁县“,“柘荣县“]);
dsy.add(“0_2_4“,[“莆田市“,“仙游县“]);
dsy.add(“0_2_5“,[“安溪县“,“德化县“,“惠安县“,“金门县“,“晋江市“,“南安市“,“泉州市“,“石狮市“,“永春县“]);
dsy.add(“0_2_6“,[“大田县“,“建宁县“,“将乐县“,“明溪县“,“宁化县“,“清流县“,“三明市“,“沙县“,“泰宁县“,“永安市“,“尤溪县“]);
dsy.add(“0_2_7“,[“厦门市“]);
dsy.add(“0_2_8“,[“长泰县“,“东山县“,“华安县“,“龙海市“,“南靖县“,“平和县“,“云霄县“,“漳浦县“,“漳州市“,“诏安县“]);

dsy.add(“0_3“,[“白银“,“定西“,“甘南藏族自治州“,“嘉峪关“,“金昌“,“酒泉“,“兰州“,“临夏回族自治州“,“陇南“,“平凉“,“庆阳“,“天水“,“武威“,“张掖“]);
dsy.add(“0_3_0“,[“白银市“,“会宁县“,“景泰县“,“靖远县“]);
dsy.add(“0_3_1“,[“定西县“,“临洮县“,“陇西县“,“通渭县“,“渭源县“,“漳县“,“岷县“]);
dsy.add(“0_3_2“,[“迭部县“,“合作市“,“临潭县“,“碌曲县“,“玛曲县“,“夏河县“,“舟曲县“,“卓尼县“]);
dsy.add(“0_3_3“,[“嘉峪关市“]);
dsy.add(“0_3_4“,[“金昌市“,“永昌县“]);
dsy.add(“0_3_5“,[“阿克塞哈萨克族自治县“,“安西县“,“敦煌市“,“金塔县“,“酒泉市“,“肃北蒙古族自治县“,“玉门市“]);
dsy.add(“0_3_6“,[“皋兰县“,“兰州市“,“永登县“,“榆中县“]);
dsy.add(“0_3_7“,[“东乡族自治县“,“广河县“,“和政县“,“积石山保安族东乡族撒拉族自治县“,“康乐县“,“临夏市“,“临夏县“,“永靖县“]);
dsy.add(“0_3_8“,[“成县“,“徽县“,“康县“,“礼县“,“两当县“,“文县“,“武都县“,“西和县“,“宕昌县“]);
dsy.add(“0_3_9“,[“崇信县“,“华亭县“,“静宁县“,“灵台县“,“平凉市“,“庄浪县“,“泾川县“]);
dsy.add(“0_3_10“,[“合水县“,“华池县“,“环县“,“宁县“,“庆城县“,“庆阳市“,“镇原县“,“正宁县“]);
dsy.add(“0_3_11“,[“甘谷县“,“秦安县“,“清水县“,“天水市“,“武山县“,“张家川回族自治县“]);
dsy.add(“0_3_12“,[“古浪县“,“民勤县“,“天祝藏族自治县“,“武威市“]);
dsy.add(“0_3_13“,[“高台县“,“临泽县“,“民乐县“,“山丹县“,“肃南裕固族自治县“,“张掖市“]);

dsy.add(“0_4“,[“潮州“,“东莞“,“佛山“,“广州“,“河源“,“惠州“,“江门“,“揭阳“,“茂名“,“梅州“,“清远“,“汕头“,“汕尾“,“韶关“,“深圳“,“阳江“,“云浮“,“湛江“,“肇庆“,“中山“,“珠海“]);
dsy.add(“0_4_0“,[“潮安县“,“潮州市“,“饶平县“]);
dsy.add(“0_4_1“,[“东莞市“]);
dsy.add(“0_4_2“,[“佛山市“]);
dsy.add(“0_4_3“,[“从化市“,“广州市“,“增城市“]);
dsy.add(“0_4_4“,[“东源县“,“和平县“,“河源市“,“连平县“,“龙川县“,“紫金县“]);
dsy.add(“0_4_5“,[“博罗县“,“惠东县“,“惠阳市“,“惠州市“,“龙门县“]);
dsy.add(“0_4_6“,[“恩平市“,“鹤山市“,“江门市“,“开平市“,“台山市“]);
dsy.add(“0_4_7“,[“惠来县“,“揭东县“,“揭西县“,“揭阳市“,“普宁市“]);
dsy.add(“0_4_8“,[“电白县“,“高州市“,“化州市“,“茂名市“,“信宜市“]);
dsy.add(“0_4_9“,[“大埔县“,“丰顺县“,“蕉岭县“,“梅县“,“梅州市“,“平远县“,“五华县“,“兴宁市“]);
dsy.add(“0_4_10“,[“佛冈县“,“连南瑶族自治县“,“连山壮族瑶族自治县“,“连州市“,“清新县“,“清远市“,“阳山县“,“英德市“]);
dsy.add(“0_4_11“,[“潮阳市“,“澄海市“,“南澳县“,“汕头市“]);
dsy.add(“0_4_12“,[“海丰县“,“陆丰市“,“陆河县“,“汕尾市“]);
dsy.add(“0_4_13“,[“乐昌市“,“南雄市“,“曲江县“,“仁化县“,“乳源瑶族自治县“,“韶关市“,“始兴县“,“翁源县“,“新丰县“]);
dsy.add(“0_4_14“,[“深圳市“]);
dsy.add(“0_4_15“,[“阳春市“,“阳东县“,“阳江市“,“阳西县“]);
dsy.add(“0_4_16“,[“罗定市“,“新兴县“,“郁南县“,“云安县“,“云浮市“]);
dsy.add(“0_4_17“,[“雷州市“,“廉江市“,“遂溪县“,“吴川市“,“徐闻县“,“湛江市“]);
dsy.add(“0_4_18“,[“德庆县“,“封开县“,“高要市“,“广宁县“,“怀集县“,“四会市“,“肇庆市“]);
dsy.add(“0_4_19“,[“中山市“]);
dsy.add(“0_4_20“,[“珠海市“]);

一段js下拉菜单代码，我想二级菜单在上面向上弹出请问怎么修改

只改css部分的代码就可以了

首先

加上 “position: relative;“ 属性，是为了使它的子级元素能够根据该元素的位置定位。

然后当然是修改这里

设定 “bottom: 25px;“ 使该元素的底部和其上级元素的顶部对齐。

最后再调整整个菜单的位置，让二级菜单不超出窗口范围就可以了。

用js写一个延迟下拉的二级菜单

$(“.nav .tit“).bind(“hover“,function(){
var _this = this;
setTimeout(function(){
$(_this).find(“.box“).show();

},1000);

});
手敲，求采纳！

下拉菜单控制二级下拉菜单显示与隐藏JS代码

联动菜单的实现方法：

1.确定数据格式：

首先，我们介绍一下创建 Option 的语法：
Code:

------------------------------------
var newOption = new Option(optionText, optionvalue);
------------------------------------

根据上面的语法，我们知道 select 选项分 optionText 和 optionvalue 两个内容，optionText 即下拉框中我们看到的选项，而 optionvalue 则是提交的实际值。比如一个选项我们看到的是 “北京”，而实际提交的值是 “010”。

为了保持一致，我们确定选项的格式为：
Code:

------------------------------------
{txt:“选项名“, val:“选项值“}
------------------------------------

那么一个选项组则是：
Code:

------------------------------------
var childArr = ;

childArr[’父选项值1’] = [
{txt:“选项名1“, val:“选项值1“},
{txt:“选项名2“, val:“选项值2“},
{txt:“选项名3“, val:“选项值3“},
...
{txt:“选项名n“, val:“选项值n“}
]

childArr[’父选项值2’] = [
{txt:“选项名1“, val:“选项值1“},
{txt:“选项名2“, val:“选项值2“},
{txt:“选项名3“, val:“选项值3“},
...
{txt:“选项名n“, val:“选项值n“}
]
------------------------------------

其中“父选项值”是父下拉列表选中的值。

注意：[ ] 和 {} 中的值是以“,” (逗号)分隔的，但是最后一个值后面不能有 “,” (逗号)，否则语法错误， PHP 程序员要特别注意 ！！！

2.根据传入的数组创建选项列表：

Code:

------------------------------------
for (var i=0; i 《 len; i++)
{
selectObj.options[i] = new Option(optionList[i].txt, optionList[i].val);
}
------------------------------------

3.在设置选项之前，我们需要先将原有选项清空：

Code:

------------------------------------
function removeOptions(selectObj)
{
if (typeof selectObj != ’object’)
{
selectObj = document.getElementById(selectObj);
}

// 原有选项计数
var len = selectObj.options.length;

for (var i=0; i 《 len; i++)
{
// 移除当前选项
selectObj.options = null;
}
}
------------------------------------

注意，这里不是用 selectObj.options[i] 而是用的 selectObj.options ，由于在 options 删除后，后面的选项就会补上，因此，我们只需要 selectObj.options = null 。

4.设置一个提示选择项和默认选择项：

通常我们在下拉列表中会设置一个提示选择项，如：“请选择城市”，这个选项值为空，作用只是提示用户执行选择操作。

另外，下拉列表也需要能够设置默认选择项，即在页面加载的时候，设置选中状态的项目。

完整代码如下：

-------------------------------------------------------
JS代码：
-------------------------------------------------------
《script language=“JavaScript“ type=“text/javascript“》
《!--
/*
* 说明：将指定下拉列表的选项值清空
* 作者：CodeBit.cn ( http://www.CodeBit.cn )
*
* @param {String || Object]} selectObj 目标下拉选框的名称或对象，必须
*/

function removeOptions(selectObj) {
if (typeof selectObj != ’object’) {
selectObj = document.getElementById(selectObj);
}

// 原有选项计数
var len = selectObj.options.length;

for (var i=0; i 《 len; i++) {
// 移除当前选项
selectObj.options = null;
}
}

/*
* 说明：设置传入的选项值到指定的下拉列表中
* 作者：CodeBit.cn ( http://www.CodeBit.cn )
*
* @param {String || Object]} selectObj 目标下拉选框的名称或对象，必须
* @param {Array} optionList 选项值设置 格式：[{txt:’北京’, val:’010’}, {txt:’上海’, val:’020’}] ，必须
* @param {String} firstOption 第一个选项值，如：“请选择”，可选，值为空
* @param {String} selected 默认选中值，可选
*/

function setSelectOption(selectObj, optionList, firstOption, selected) {
if (typeof selectObj != ’object’) {
selectObj = document.getElementById(selectObj);
}

// 清空选项
removeOptions(selectObj);

// 选项计数
var start = 0;

// 如果需要添加第一个选项
if (firstOption) {
selectObj.options = new Option(firstOption, ’’);

// 选项计数从 1 开始
start ++;
}

var len = optionList.length;

for (var i=0; i 《 len; i++) {
// 设置 option
selectObj.options[start] = new Option(optionList[i].txt, optionList[i].val);

// 选中项
if(selected == optionList[i].val) {
selectObj.options[start].selected = true;
}

// 计数加 1
start ++;
}

}

//--》
《/script》

-------------------------------------------------------
HTML代码：
-------------------------------------------------------

《script language=“JavaScript“ type=“text/javascript“》
var cityArr = ;
cityArr[’江苏省’] = [
{txt:’南京’, val:’南京’},
{txt:’无锡’, val:’无锡’},
{txt:’徐州’, val:’徐州’},
{txt:’苏州’, val:’苏州’},
{txt:’南通’, val:’南通’},
{txt:’淮阴’, val:’淮阴’},
{txt:’扬州’, val:’扬州’},
{txt:’镇江’, val:’镇江’},
{txt:’常州’, val:’常州’}
];

cityArr[’浙江省’] = [
{txt:’杭州’, val:’杭州’},
{txt:’宁波’, val:’宁波’},
{txt:’温州’, val:’温州’},
{txt:’湖州’, val:’湖州’}
];

function setCity(province) {
setSelectOption(’city’, cityArr[province], ’-请选择-’);
}
《/script》

《select name=“province“ id=“province“ onchange=“if(this.value != ’’) setCity(this.options[this.selectedIndex].value);“》
《option value=““》-请选择-《/option》
《option value=“江苏省“》江苏省《/option》
《option value=“浙江省“》浙江省《/option》
《/select》 省

《select name=“city“ id=“city“》
《option value=““》-请选择-《/option》
《/select》 市

关于下拉菜单的JS代码

《style type=“text/css“》

#mainMenu{
background-color: #FFF; /* Background color of main menu */
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Fonts of main menu items */
font-size:1.2em; /* Font size of main menu items */
border-bottom:1px solid #000000; /* Bottom border of main menu */
height:30px; /* Height of main menu */
position:relative; /* Don’t change this position attribute */
visibility: hidden;

}
#mainMenu a{
padding-left:20px; /* Spaces at the left of main menu items */
padding-right:20px; /* Spaces at the right of main menu items */
font-weight: bold;
/* Don’t change these two options */
position:absolute;
bottom:-1px;
}
#submenu{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font of sub menu items */
background-color:#E2EBED; /* Background color of sub menu items */
visibility: hidden;
width:778px; /* Don’t change this option */

}

html》body #clearmenu{ /* non IE browsers menu bottom spacing */
margin-bottom: 2px;
}

#submenu div{
white-space:nowrap; /* Don’t change this option */

}
/*
Style attributes of active menu item
*/
#mainMenu .activeMenuItem{
/* Border options */
border-left:1px solid #000000;
border-top:1px solid #000000;
border-right:1px solid #000000;
background-color: #E2EBED; /* Background color */

cursor:pointer; /* Cursor like a hand when the user moves the mouse over the menu item */
}
/*
Style attributes of inactive menu items
*/
#mainMenu .inactiveMenuItem{
color: #000; /* Text color */
cursor:pointer; /* Cursor like a hand when the user moves the mouse over the menu item */
}

#submenu a{
text-decoration:none; /* No underline on sub menu items - use text-decoration:underline; if you want the links to be underlined */
padding-left:5px; /* Space at the left of each sub menu item */
padding-right:5px; /* Space at the right of each sub menu item */
color: #000; /* Text color */
}

#submenu a:hover{
color: #FF0000; /* Red color when the user moves the mouse over sub menu items */
}

《/style》
《script type=“text/javascript“》

//more javascript from http://www.smallrain.net

var topMenuSpacer = 15; // Horizontal space(pixels) between the main menu items
var activateSubOnClick = false; // if true-》 Show sub menu items on click, if false, show submenu items onmouseover
var leftAlignSubItems = false; // left align sub items t
var activeMenuItem = false; // Don’t change this option. It should initially be false
var activeTabIndex = 0; // Index of initial active tab (0 = first tab) - If the value below is set to true, it will override this one.
var rememberActiveTabByCookie = true; // Set it to true if you want to be able to save active tab as cookie

/*
These cookie functions are downloaded from
http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm
*/
function Get_Cookie(name) {
var start = document.cookie.indexOf(name+“=“);
var len = start+name.length+1;
if ((!start) && (name != document.cookie.substring(0,name.length))) return null;
if (start == -1) return null;
var end = document.cookie.indexOf(“;“,len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len,end));
}
// This function has been slightly modified
function Set_Cookie(name,value,expires,path,domain,secure) {
expires = expires * 60*60*24*1000;
var today = new Date();
var expires_date = new Date( today.getTime() + (expires) );
var cookieString = name + “=“ +escape(value) +
( (expires) ? “;expires=“ + expires_date.toGMTString() : ““) +
( (path) ? “;path=“ + path : ““) +
( (domain) ? “;domain=“ + domain : ““) +
( (secure) ? “;secure“ : ““);
document.cookie = cookieString;
}

function showHide()
{
if(activeMenuItem){
activeMenuItem.className = ’inactiveMenuItem’;
var theId = activeMenuItem.id.replace(/[^\d]/g,’’);
document.getElementById(’submenu_’+theId).style.display=’none’;
}

activeMenuItem = this;
this.className = ’activeMenuItem’;
var theId = this.id.replace(/[^\d]/g,’’);
document.getElementById(’submenu_’+theId).style.display=’block’;

if(rememberActiveTabByCookie){
Set_Cookie(’dhtmlgoodies_tab_menu_tabIndex’,’index: ’ + (theId-1),100);
}
}

function initMenu()
{
var mainMenuObj = document.getElementById(’mainMenu’);
var subMenuObj = document.getElementById(’submenu’); //DD added line
mainMenuObj.style.visibility=subMenuObj.style.visibility=“visible“ //DD added line
var menuItems = mainMenuObj.getElementsByTagName(’A’);
if(document.all){
mainMenuObj.style.visibility = ’hidden’;
document.getElementById(’submenu’).style.visibility=’hidden’;
}
if(rememberActiveTabByCookie){
var cookieValue = Get_Cookie(’dhtmlgoodies_tab_menu_tabIndex’) + ’’;
cookieValue = cookieValue.replace(/[^\d]/g,’’);
if(cookieValue.length》0 && cookieValue《menuItems.length){
activeTabIndex = cookieValue/1;
}
}

var currentLeftPos = 15;
for(var no=0;no《menuItems.length;no++){
if(activateSubOnClick)menuItems[no].onclick = showHide; else menuItems[no].onmouseover = showHide;
menuItems[no].id = ’mainMenuItem’ + (no+1);
menuItems[no].style.left = currentLeftPos + ’px’;
currentLeftPos = currentLeftPos + menuItems[no].offsetWidth + topMenuSpacer;
if(no==activeTabIndex){
menuItems[no].className=’activeMenuItem’;
activeMenuItem = menuItems[no];
}else menuItems[no].className=’inactiveMenuItem’;
if(!document.all)menuItems[no].style.bottom = ’-1px’;

}

var mainMenuLinks = mainMenuObj.getElementsByTagName(’A’);

var subCounter = 1;
var parentWidth = mainMenuObj.offsetWidth;
while(document.getElementById(’submenu_’ + subCounter)){
var subItem = document.getElementById(’submenu_’ + subCounter);

if(leftAlignSubItems){
// No action
}else{
var leftPos = mainMenuLinks[subCounter-1].offsetLeft;
document.getElementById(’submenu_’+subCounter).style.paddingLeft = leftPos + ’px’;
subItem.style.position =’absolute’;
if(subItem.offsetWidth 》 parentWidth){
leftPos = leftPos - Math.max(0,subItem.offsetWidth-parentWidth);
}
subItem.style.paddingLeft = leftPos + ’px’;
subItem.style.position =’static’;

}
if(subCounter==(activeTabIndex+1)){
subItem.style.display=’block’;
}else{
subItem.style.display=’none’;
}

subCounter++;
}
if(document.all){
mainMenuObj.style.visibility = ’visible’;
document.getElementById(’submenu’).style.visibility=’visible’;
}
document.getElementById(’submenu’).style.display=’block’;
}
window.onload = initMenu;
《/script》

《div id=“mainMenu“》
《a》网页特效《/a》
《a》插件下载《/a》
《a》网络学院《/a》
《a》网站联盟《/a》
《/div》
《div id=“submenu“》
《!-- The first sub menu --》
《div id=“submenu_1“》
《a href=“http://www.smallrain.net/javascript.asp?type=图形图像“》图形图像《/a》
《a href=“http://www.smallrain.net/javascript.asp?type=鼠标事件“》鼠标事件《/a》
《a href=“http://www.smallrain.net/javascript.asp?type=时间日期“》时间日期《/a》
《a href=“http://www.smallrain.net/javascript.asp?type=导航菜单“》导航菜单《/a》
《a href=“http://www.smallrain.net/javascript.asp?type=文字效果“》文字效果《/a》
《a href=“http://www.smallrain.net/javascript.asp?type=窗体变化“》窗体变化《/a》
《/div》
《!-- Second sub menu --》
《div id=“submenu_2“》
《a href=“http://www.smallrain.net/plug.asp?type=DreamWeaver插件“》DreamWeaver插件《/a》
《a href=“http://www.smallrain.net/plug.asp?type=FireWork插件“FireWork插件《/a》
《a href=“http://www.smallrain.net/plug.asp?type=PhotoShop插件“》PhotoShop插件《/a》
《a href=“http://www.smallrain.net/plug.asp?type=FLASH组件“》FLASH组件《/a》
《/div》
《!-- Third sub menu --》
《div id=“submenu_3“》
《a href=“http://www.smallrain.net/study.asp?type=网页制作“》网页制作《/a》
《a href=“http://www.smallrain.net/study.asp?type=网络编程“》网络编程《/a》
《a href=“http://www.smallrain.net/study.asp?type=图形图像“》图形图像《/a》
《a href=“http://www.smallrain.net/study.asp?type=多媒体制作“》多媒体制作《/a》
《a href=“http://www.smallrain.net/study.asp?type=网站建设“》网站建设《/a》
《a href=“http://www.smallrain.net/study.asp?type=操作系统“》操作系统《/a》
《/div》
《!-- Fourth sub menu --》
《div id=“submenu_4“》
《a href=“http://www.smallrain.net/webmeng_show.asp?type=1“》网页设计《/a》
《a href=“http://www.smallrain.net/webmeng_show.asp?type=2“》艺术创作《/a》
《a href=“http://www.smallrain.net/webmeng_show.asp?type=3“》电脑网络《/a》
《a href=“http://www.smallrain.net/webmeng_show.asp?type=4“》生活休闲《/a》
《a href=“http://www.smallrain.net/webmeng_show.asp?type=5“》个性展示《/a》
《a href=“http://www.smallrain.net/webmeng_show.asp?type=6“》其它类型《/a》

《/div》
《/div》
《br id=“clearmenu“ /》

js二级联动下拉列表菜单

《!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN“》
《html》
《head》
《title》New Document 《/title》
《script language=“JavaScript“ type=“text/javascript“》

var city=[
[“北京“,“天津“,“上海“,“重庆“],
[“南京“,“苏州“,“南通“,“常州“],
[“福州“,“福安“,“龙岩“,“南平“],
[“广州“,“潮阳“,“潮州“,“澄海“],
[“兰州“,“白银“,“定西“,“敦煌“]
];
function getCity(){
var sltProvince=document.getElementById(“province“);
var sltCity=document.getElementById(“city“);
var provinceCity=city[sltProvince.selectedIndex-1];
sltCity.length=1;
for(var i=0;i《provinceCity.length;i++){
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
}
}

《/script》
《/head》
《body》

《form action=“somepage.asp“ name=theForm“》
《select name=“province“ id=“province“ onchange=“getCity()“》
《option value=“0“》请选择所在省份《/option》
《option value=“直辖市“》直辖市《/option》
《option value=“江苏省“》江苏省《/option》
《option value=“福建省“》福建省《/option》
《option value=“广东省“》广东省《/option》
《option value=“甘肃省“》甘肃省《/option》
《/select》
《select id=“city“ name=“city“》
《option value=“0“》请选择所在城市《/option》
《/select》
《/form》
《/body》
《/html》