适合移动网页客户端城市下拉选择

新建html文档。

书写hmtl代码。

书写css代码。* { margin: 0; padding: 0; list-style: none; }body { font: 13px/26px '微软雅黑'; background: #666; }.province { width: 100%; height: 42px; background: #C00; position: relative; }.province span.left { width: 48px; height: 42px; color: #FFF; line-height: 42px; font-size: 14px; font-weight: bold; display: block; float: left; margin-left: 10%; }.province span.right { width: 200px; height: 24px; line-height: 24px; background: #FFF url(../images/province_sprites.png) no-repeat 189px -2px; display: block; float: left; margin-top: 8px; padding-left: 4px; }.province ul { width: 328px; height: auto; background: #FFF; border: 1px solid #dfdfdf; border-bottom: none; clear: both; position: absolute; left: 0; top: 42px; display: none; }.province ul li { height: 30px; line-height: 30px; border-bottom: 1px solid #dfdfdf; padding-left: 10px; }.province ul li b { font-weight: bold; }.province ul li a { color: #000; text-decoration: none; line-height: 30px; padding: 0 10px; }.province ul li a:hover { color: #C00; }.show { display: block; }

书写并添加js代码。

代码整体结构。

查看效果。