CSS弹出DIV层效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>纯CSS弹出层效果</title>

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

</head>

<style type="text/css">

.f_l {float:left;}

.f_r {float:right;}

.city {height:60px;padding-left:10px;text-align:center;}

.city_now {width:60px;padding-top:20px;color:#595756;font-size:16px;letter-spacing:3px;font-weight:bold;}

.city_box {text-align:center;}

.city_box span {vertical-align:bottom;}

.city_nav {text-align:center;height:18px;line-height:18px;color:#333;cursor:pointer;overflow:hidden;display:inline-block;}

.city_hover {color:#f25000;height:18px;line-height:18px;overflow:hidden;}

.city_link {background:#FFFFFF;border:#f25000 2px solid;width:305px;display:none;z-index:9999;}

.city_hovers {display:block;position:absolute;}

.city_links {width:60px;margin-right:1px;height:30px;line-height:30px;font-size:13px;text-align:center;background:#f6f6f6;vertical-align:top;margin-bottom:1px;display:inline-block;}

.city_show {background:#ccc;height:18px;line-height:18px;padding:5px;cursor:pointer;}

</style>

<body>

<div class="city f_l">

<div class="city_now">北京</div>

<div class="city_swich">

<span class="city_nav" id="city_nav" onclick="this.className='city_nav city_hover';document.getElementById('city_link').className='city_link city_hovers'">[切换城市]</span></div>

<div id="city_link" class="city_link">

<div class="city_show">

<span class="f_l f_red"><a href="{$EXT[wap_url]}" target="_blank">欢迎使用！</a>

</span></div>

<a class="city_links" href="http://www.eelou.com" onclick="M.goExpr('city_eelou_id','0');return false;">全国</a>

<a class="city_links" href="http://bj.eelou.com" onclick="M.goExpr('city_eelou_id','1');return false;">北京</a>

<a class="city_links" href="http://sh.eelou.com" onclick="M.goExpr('city_eelou_id','2');return false;">上海</a>

<a class="city_links" href="http://sz.eelou.com" onclick="M.goExpr('city_eelou_id','3');return false;">深圳</a>

<a class="city_links" href="http://gz.eelou.com" onclick="M.goExpr('city_eelou_id','4');return false;">广州</a>

<a class="city_links" href="http://xa.eelou.com" onclick="M.goExpr('city_eelou_id','5');return false;">西安</a>

<a class="city_links" href="http://hz.eelou.com" onclick="M.goExpr('city_eelou_id','6');return false;">杭州</a>

<a class="city_links" href="http://cs.eelou.com" onclick="M.goExpr('city_eelou_id','7');return false;">长沙</a>

<a class="city_links" href="http://cq.eelou.com" onclick="M.goExpr('city_eelou_id','8');return false;">重庆</a>

<a class="city_links" href="http://nb.eelou.com" onclick="M.goExpr('city_eelou_id','9');return false;">宁波</a>

<a class="city_links" href="http://cq.eelou.com" onclick="M.goExpr('city_eelou_id','10');return false;">成都</a>

<a class="city_links" href="http://cd.eelou.com" onclick="M.goExpr('city_eelou_id','11');return false;">青岛</a>

<a class="city_links" href="http://nj.eelou.com" onclick="M.goExpr('city_eelou_id','12');return false;">南京</a>

<a class="city_links" href="http://km.eelou.com" onclick="M.goExpr('city_eelou_id','13');return false;">昆明</a>

<a class="city_links" href="http://wh.eelou.com" onclick="M.goExpr('city_eelou_id','14');return false;">武汉</a>

<a class="city_links" href="http://tj.eelou.com" onclick="M.goExpr('city_eelou_id','15');return false;">天津</a>

<a class="city_links" href="http://hf.eelou.com" onclick="M.goExpr('city_eelou_id','16');return false;">合肥</a>

<a class="city_links" href="http://zz.eelou.com" onclick="M.goExpr('city_eelou_id','17');return false;">郑州</a>

<a class="city_links" href="http://sy.eelou.com" onclick="M.goExpr('city_eelou_id','18');return false;">沈阳</a>

<a class="city_links" href="http://dl.eelou.com" onclick="M.goExpr('city_eelou_id','19');return false;">大连</a>

<a class="city_links" href="http://fz.eelou.com" onclick="M.goExpr('city_eelou_id','20');return false;">福州</a>

<a class="city_links" href="http://sz.eelou.com" onclick="M.goExpr('city_eelou_id','21');return false;">苏州</a>

<span class="city_links">

</span><span class="city_links"></span><span class="city_links"></span>

</div>

</body>

</html>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。