JS城市联动菜单

分类 : 代码案例

JS城市联动菜单


<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>城市联动菜单 www.css5.net</title>

<style type="text/css">

ul,li,dl,dd {

padding:0;

margin:0;

list-style-type:none;

}

.menu1{

width:182px;

border:1px solid #feb951;

background:#fef4ea;

padding-top:3px;

font-size:12px;

}

.area li{

height:22px;

line-height:22px;

text-align:left;

position:relative;

}

.area li a {

display:block;

padding-left:20px;

}

.area li dl {

width:180px;

overflow:hidden;

display:none;

position:absolute;

top:-1px;

right:-182px;

z-index:35533;

border:1px solid #feb951;

background:#fef4ea;

padding:5px 0;

}

.area li dl a:hover {

border:1px solid #feb951;

background:#fff;

margin:0 5px;

padding-left:14px;

}

.area li.lion {

height:20px;

line-height:20px;

text-align:left;

border-top:1px solid #ffb850;

border-bottom:1px solid #ffb850;

background:#ffe7cc;

}

.area li.lion dl {display:block;}

</style>

</head>

<body>

<div id="rtab2_box" class="menu1">

<ul id="area" class="area">

<li><a href="/a_01/">安徽省</a>

<dl>

<dd><a href="/a_010100/">安庆市</a></dd>

<dd><a href="/a_010200/">蚌埠市</a></dd>

<dd><a href="/a_010300/">亳州市</a></dd>

<dd><a href="/a_010400/">巢湖市</a></dd>

<dd><a href="/a_010500/">滁州市</a></dd>

<dd><a href="/a_010600/">阜阳市</a></dd>

<dd><a href="/a_010700/">合肥市</a></dd>

<dd><a href="/a_010800/">淮北市</a></dd>

<dd><a href="/a_010900/">淮南市</a></dd>

<dd><a href="/a_011000/">黄山市</a></dd>

<dd><a href="/a_011100/">六安市</a></dd>

<dd><a href="/a_011200/">马鞍山市</a></dd>

<dd><a href="/a_011300/">宿州市</a></dd>

<dd><a href="/a_011400/">太湖市</a></dd>

<dd><a href="/a_011500/">芜湖市</a></dd>

<dd><a href="/a_011600/">歙县</a></dd>

<dd><a href="/a_011700/">宣城市</a></dd>

<dd><a href="/a_011800/">池城市</a></dd>

<dd><a href="/a_011900/">铜陵市</a></dd>

</dl>

</li>

<li><a href="/a_02/">北京</a>

<dl>

<dd><a href="/a_020100/">昌平区</a></dd>

<dd><a href="/a_020200/">朝阳区</a></dd>

<dd><a href="/a_020300/">崇文区</a></dd>

<dd><a href="/a_020400/">大兴区</a></dd>

<dd><a href="/a_020500/">东城区</a></dd>

<dd><a href="/a_020600/">房山区</a></dd>

<dd><a href="/a_020700/">丰台区</a></dd>

<dd><a href="/a_020800/">海淀区</a></dd>


<dd><a href="/a_020900/">怀柔区</a></dd>

<dd><a href="/a_021000/">门头沟区</a></dd>

<dd><a href="/a_021100/">密云县</a></dd>

<dd><a href="/a_021200/">平谷区</a></dd>

<dd><a href="/a_021300/">石景山区</a></dd>

<dd><a href="/a_021400/">顺义区</a></dd>

<dd><a href="/a_021500/">通州区</a></dd>

<dd><a href="/a_021600/">西城区</a></dd>

<dd><a href="/a_021700/">宣武区</a></dd>

<dd><a href="/a_021800/">延庆县</a></dd>

<dd><a href="/a_021900/">燕山区</a></dd>

</dl>

</li>

<li><a href="/a_03/">重庆</a>

<dl>

<dd><a href="/a_030100/">巴南区</a></dd>

<dd><a href="/a_030200/">北碚区</a></dd>

<dd><a href="/a_030300/">璧山县</a></dd>

<dd><a href="/a_030400/">长寿区</a></dd>

<dd><a href="/a_030500/">城口县</a></dd>

<dd><a href="/a_030600/">大足县</a></dd>

<dd><a href="/a_030700/">垫江县</a></dd>

<dd><a href="/a_030800/">渡口区</a></dd>

<dd><a href="/a_030900/">丰都县</a></dd>

<dd><a href="/a_031000/">奉节县</a></dd>

<dd><a href="/a_031100/">涪陵区</a></dd>

<dd><a href="/a_031200/">涪陵市</a></dd>

<dd><a href="/a_031300/">合川市</a></dd>

<dd><a href="/a_031400/">江北区</a></dd>

<dd><a href="/a_031500/">江津市</a></dd>

<dd><a href="/a_031600/">九龙坡区</a></dd>

<dd><a href="/a_031700/">开县</a></dd>

<dd><a href="/a_031800/">梁平县</a></dd>

<dd><a href="/a_031900/">南岸区</a></dd>

<dd><a href="/a_032000/">南川市</a></dd>

<dd><a href="/a_032100/">彭水</a></dd>

<dd><a href="/a_032200/">綦江县</a></dd>

<dd><a href="/a_032300/">黔江区</a></dd>

<dd><a href="/a_032400/">荣昌县</a></dd>

<dd><a href="/a_032500/">沙坪坝区</a></dd>

<dd><a href="/a_032600/">石柱</a></dd>

<dd><a href="/a_032700/">双桥区</a></dd>

<dd><a href="/a_032800/">铜梁县</a></dd>

<dd><a href="/a_032900/">潼南县</a></dd>

<dd><a href="/a_033000/">万盛区</a></dd>

<dd><a href="/a_033100/">万县市</a></dd>

<dd><a href="/a_033200/">万州区</a></dd>

<dd><a href="/a_033300/">巫山县</a></dd>

<dd><a href="/a_033400/">巫溪县</a></dd>

<dd><a href="/a_033500/">武隆县</a></dd>

<dd><a href="/a_033600/">秀山</a></dd>

<dd><a href="/a_033700/">永川市</a></dd>

<dd><a href="/a_033800/">酉阳</a></dd>

<dd><a href="/a_033900/">渝北区</a></dd>

<dd><a href="/a_034000/">云阳县</a></dd>

<dd><a href="/a_034100/">忠县</a></dd>

<dd><a href="/a_034200/">渝中区</a></dd>

</dl>

</li>

<li><a href="/a_04/">福建省</a>

<dl>

<dd><a href="/a_040100/">福州市</a></dd>

<dd><a href="/a_040200/">龙岩市</a></dd>

<dd><a href="/a_040300/">南平市</a></dd>

<dd><a href="/a_040400/">宁德市</a></dd>

<dd><a href="/a_040500/">莆田市</a></dd>

<dd><a href="/a_040600/">泉州市</a></dd>

<dd><a href="/a_040700/">三明市</a></dd>

<dd><a href="/a_040800/">邵武市</a></dd>

<dd><a href="/a_040900/">石狮市</a></dd>

<dd><a href="/a_041000/">厦门市</a></dd>

<dd><a href="/a_041100/">永安市</a></dd>

<dd><a href="/a_041200/">漳州市</a></dd>

</dl>

</li>

<li><a href="/a_05/">甘肃省</a>

<dl>

<dd><a href="/a_050100/">白银市</a></dd>

<dd><a href="/a_050200/">定西市</a></dd>

<dd><a href="/a_050300/">甘南</a></dd>

<dd><a href="/a_050400/">嘉峪关市</a></dd>

<dd><a href="/a_050500/">金昌市</a></dd>

<dd><a href="/a_050600/">酒泉市</a></dd>

<dd><a href="/a_050700/">兰州市</a></dd>

<dd><a href="/a_050800/">临夏市</a></dd>

<dd><a href="/a_050900/">陇南市</a></dd>

<dd><a href="/a_051000/">平凉市</a></dd>

<dd><a href="/a_051100/">庆阳市</a></dd>

<dd><a href="/a_051200/">天水市</a></dd>

<dd><a href="/a_051300/">武威市</a></dd>

<dd><a href="/a_051400/">西峰市</a></dd>

<dd><a href="/a_051500/">玉门市</a></dd>

<dd><a href="/a_051600/">张掖市</a></dd>

</dl>

</li>

<li><a href="/a_06/">广东省</a>

<dl>

<dd><a href="/a_060100/">潮州市</a></dd>

<dd><a href="/a_060200/">潮阳市</a></dd>

<dd><a href="/a_060300/">东莞市</a></dd>

<dd><a href="/a_060400/">佛山市</a></dd>

<dd><a href="/a_060500/">广州市</a></dd>

<dd><a href="/a_060600/">河源市</a></dd>

<dd><a href="/a_060700/">惠州市</a></dd>

<dd><a href="/a_060800/">江门市</a></dd>

<dd><a href="/a_060900/">揭阳</a></dd>

<dd><a href="/a_061000/">茂名市</a></dd>

<dd><a href="/a_061100/">梅州市</a></dd>

<dd><a href="/a_061200/">清远市</a></dd>

<dd><a href="/a_061300/">汕头市</a></dd>

<dd><a href="/a_061400/">汕尾市</a></dd>

<dd><a href="/a_061500/">韶关市</a></dd>

<dd><a href="/a_061600/">深圳市</a></dd>

<dd><a href="/a_061700/">顺德</a></dd>

<dd><a href="/a_061800/">阳江市</a></dd>

<dd><a href="/a_061900/">云浮</a></dd>

<dd><a href="/a_062000/">湛江市</a></dd>

<dd><a href="/a_062100/">肇庆市</a></dd>

<dd><a href="/a_062200/">中山市</a></dd>

<dd><a href="/a_062300/">珠海</a></dd>

<dd><a href="/a_062400/">恩平市</a></dd>

</dl>

</li>

<li><a href="/a_07/">广西省</a>

<dl>

<dd><a href="/a_070100/">百色市</a></dd>

<dd><a href="/a_070200/">北海市</a></dd>

<dd><a href="/a_070300/">崇左市</a></dd>

<dd><a href="/a_070400/">防城港市</a></dd>

<dd><a href="/a_070500/">贵港市</a></dd>

<dd><a href="/a_070600/">桂林市</a></dd>

<dd><a href="/a_070700/">合山市</a></dd>

<dd><a href="/a_070800/">河池市</a></dd>

<dd><a href="/a_070900/">贺州市</a></dd>

<dd><a href="/a_071000/">来宾市</a></dd>

<dd><a href="/a_071100/">柳州市</a></dd>

<dd><a href="/a_071200/">南宁市</a></dd>

<dd><a href="/a_071300/">凭祥市</a></dd>

<dd><a href="/a_071400/">钦州市</a></dd>

<dd><a href="/a_071500/">梧州市</a></dd>

<dd><a href="/a_071600/">玉林市</a></dd>

</dl>

</li>

<li><a href="/a_08/">贵州省</a>

<dl>

<dd><a href="/a_080100/">安顺市</a></dd>

<dd><a href="/a_080200/">毕节市</a></dd>

<dd><a href="/a_080300/">赤水市</a></dd>

<dd><a href="/a_080400/">都匀市</a></dd>

<dd><a href="/a_080500/">贵阳市</a></dd>

<dd><a href="/a_080600/">凯里市</a></dd>

<dd><a href="/a_080700/">六盘水市</a></dd>

<dd><a href="/a_080800/">铜仁市</a></dd>

<dd><a href="/a_080900/">兴义市</a></dd>

<dd><a href="/a_081000/">遵义市</a></dd>

</dl>

</li>

<li><a href="/a_09/">海南省</a>

<dl>

<dd><a href="/a_090100/">白沙</a></dd>

<dd><a href="/a_090200/">保亭</a></dd>

<dd><a href="/a_090300/">昌江</a></dd>

<dd><a href="/a_090400/">澄迈县</a></dd>

<dd><a href="/a_090500/">儋州市</a></dd>

<dd><a href="/a_090600/">定安县</a></dd>

<dd><a href="/a_090700/">东方</a></dd>

<dd><a href="/a_090800/">海口市</a></dd>

<dd><a href="/a_090900/">乐东</a></dd>

<dd><a href="/a_091000/">临高县</a></dd>

<dd><a href="/a_091100/">陵水</a></dd>

<dd><a href="/a_091200/">琼海</a></dd>

<dd><a href="/a_091300/">琼中</a></dd>

<dd><a href="/a_091400/">三亚市</a></dd>

<dd><a href="/a_091500/">通什市</a></dd>

<dd><a href="/a_091600/">屯昌县</a></dd>

<dd><a href="/a_091700/">万宁</a></dd>

<dd><a href="/a_091800/">文昌</a></dd>

<dd><a href="/a_091900/">五指山</a></dd>

</dl>

</li>

<li><a href="/a_10/">河北省</a>

<dl>

<dd><a href="/a_100100/">保定市</a></dd>

<dd><a href="/a_100200/">泊头市</a></dd>

<dd><a href="/a_100300/">沧州市</a></dd>

<dd><a href="/a_100400/">承德市</a></dd>

<dd><a href="/a_100500/">定州市</a></dd>

<dd><a href="/a_100600/">邯郸市</a></dd>

<dd><a href="/a_100700/">衡水市</a></dd>

<dd><a href="/a_100800/">廊坊市</a></dd>

<dd><a href="/a_100900/">南宫市</a></dd>

<dd><a href="/a_101000/">秦皇岛市</a></dd>

<dd><a href="/a_101100/">任丘市</a></dd>

<dd><a href="/a_101200/">沙河市</a></dd>

<dd><a href="/a_101300/">石家庄市</a></dd>

<dd><a href="/a_101400/">唐山市</a></dd>

<dd><a href="/a_101500/">辛集市</a></dd>

<dd><a href="/a_101600/">邢台市</a></dd>

<dd><a href="/a_101700/">张家口市</a></dd>

<dd><a href="/a_101800/">涿州市</a></dd>

</dl>

</li>

<li><a href="/a_11/">河南省</a>

<dl>

<dd><a href="/a_110100/">安阳市</a></dd>

<dd><a href="/a_110200/">鹤壁市</a></dd>

<dd><a href="/a_110300/">济源</a></dd>

<dd><a href="/a_110400/">焦作市</a></dd>

<dd><a href="/a_110500/">开封市</a></dd>

<dd><a href="/a_110600/">漯河市</a></dd>

<dd><a href="/a_110700/">洛阳市</a></dd>

<dd><a href="/a_110800/">南阳市</a></dd>

<dd><a href="/a_110900/">平顶山市</a></dd>

<dd><a href="/a_111000/">濮阳市</a></dd>

<dd><a href="/a_111100/">三门峡市</a></dd>

<dd><a href="/a_111200/">商丘市</a></dd>

<dd><a href="/a_111300/">新乡市</a></dd>

<dd><a href="/a_111400/">信阳市</a></dd>

<dd><a href="/a_111500/">许昌市</a></dd>

<dd><a href="/a_111600/">义马市</a></dd>

<dd><a href="/a_111700/">郑州市</a></dd>

<dd><a href="/a_111800/">周口市</a></dd>

<dd><a href="/a_111900/">驻马店市</a></dd>

</dl>

</li>

<li><a href="/a_12/">黑龙江省</a>

<dl>

<dd><a href="/a_120100/">阿城市</a></dd>

<dd><a href="/a_120200/">北安市</a></dd>

<dd><a href="/a_120300/">大庆市</a></dd>

<dd><a href="/a_120400/">大兴安岭</a></dd>

<dd><a href="/a_120500/">哈尔滨市</a></dd>

<dd><a href="/a_120600/">鹤岗市</a></dd>

<dd><a href="/a_120700/">黑河市</a></dd>

<dd><a href="/a_120800/">鸡西市</a></dd>

<dd><a href="/a_120900/">佳木斯市</a></dd>

<dd><a href="/a_121000/">牡丹江市</a></dd>

<dd><a href="/a_121100/">七台河市</a></dd>

<dd><a href="/a_121200/">齐齐哈尔市</a></dd>

<dd><a href="/a_121300/">双鸭山市</a></dd>

<dd><a href="/a_121400/">绥汾河市</a></dd>

<dd><a href="/a_121500/">绥化市</a></dd>

<dd><a href="/a_121600/">同江市</a></dd>

<dd><a href="/a_121700/">五大连池市</a></dd>

<dd><a href="/a_121800/">伊春市</a></dd>

<dd><a href="/a_121900/">肇东市</a></dd>

</dl>

</li>


</ul>

</div>

<script type=text/javascript>

function onload() {

   try{

var lies = document.getElementById("area").getElementsByTagName("li");

for (var i=0; i< lies.length; i++) {

lies[i].onmouseover= function() {

this.className="lion";

}

lies[i].onmouseout= function() {

this.className="";

}

}

}

catch(e){}

}

onload();

</script>

<br/><br/>更多代码请访问 <a href="http://www.css5.net/" target="_blank">CSS5.NET</a>

</body>

</html>


分类: 代码案例    访问() .NET技术    Web前端    JAVA开发    HTML基础    数据库    CSS基础    电脑知识   
CSS教程-web前端教程-免费教程
HTML教程-web前端教程-免费教程

分类

.NET技术 Web前端 JAVA开发 HTML基础 数据库 CSS基础 电脑知识

随机阅读

如何把Excel中的8位的日期字符串转换为日期
html中submit和button的区别
最近程序员频繁被抓,如何避免面向监狱编程!?
Golang 使用 blackfriday 将 Markdown 转换
如何把 javascript 对象转换成 json 字符串
oracle数据库模糊查询匹配多个字符串
oracle sql like多个条件函数
oracle字段like多个条件
上海有什么好玩的地方?
html入门网页制作 零基础学习网页制作,从何学起

最新

零基础学习C语言,怎么入门?
C语言使用什么软件?
c语言用什么软件编写(新手c语言基础知识入门)
Oracle如何实现like多个值的查询
Oracle如何实现like多个值的查询 - 数据库
oracle 多个like条件查询
Oracle中关键字like的使用总结
oracle 中模糊查询对like的代替insrt()函数
oracle数据库模糊查询匹配多个字符串
Oracle如何实现like多个值的查询 - Oracle - 服务器

推荐阅读

vscode----vue中HTML代码tab键自动补全
html如何实现鼠标悬停显示文字,鼠标移走文字消失。
c语言中break语句的作用
C#语言之“string格式的日期时间字符串转为DateTime类型”
undefined是什么意思啊
DIV CSS字体(font-family)实现字体样式设置
AirPods怎么删除配对过的设备 airpods可以和电脑连接的
js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳
risk-taking中文是什么意思
C语言程序中break是什么意思?


Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16