<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<title> Pure CSS pop-up layer effects </title>
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
<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" > Beijing </div>
<div class= "City_swich" >
<span class= "City_nav" id= "City_nav" onclick= "This.classname= ' City_nav city_hover ';d Ocument.getelementbyid (' City_link '). Classname= ' City_link city_hovers ' ">[Switch city]</span></div><!
--onmouseover=/vs/onclick=--
<div id= "City_link" class= "City_link" >
<div class= "City_show" ><span class= "f_red f_r" href= "javascript:;" title= "Close form" onclick= " document.getElementById (' City_nav '). Classname= ' City_nav ';d Ocument.getelementbyid
(' City_link '). Classname= ' City_link '; return! 1; " >[close]</span><span class= "f_l f_red" ><a href= "{$EXT [Wap_url]}" target= "_blank" > Welcome! </a></span></div>
<a class= "City_links"
href= "#" onclick= "m.goexpr (' city_eelou_id ', ' 0 '); return false;" > National </a><a class= "City_links" href= "#" onclick= "m.goexpr (' city_eelou_id ', ' 1 '); return false;" > Beijing </a><a class= "City_links"
href= "#" onclick= "m.goexpr (' city_eelou_id ', ' 2 '); return false;" > Shanghai </a><a class= "City_links" href= "#" onclick= "m.goexpr (' city_eelou_id ', ' 3 '); return false;" > shenzhen </a><a class= "City_links"
href= "#" onclick= "m.goexpr (' city_eelou_id ', ' 4 '); return false;" > guangzhou </a><a class= "City_links" href= "#" onclick= "m.goexpr (' city_eelou_id ', ' 5 '); return false;" > XI ' an </a><a class= "City_links"
href= "#" onclick= "m.goexpr (' city_eelou_id ', ' 6 '); return false;" > Hangzhou </a><a class= "City_links" href= "#" onclick= "m.goexpr (' city_eelou_id ', ' 7 '); return false;" > Changsha </a><a class= "City_links"
href= "#" onclick= "m.goexpr (' city_eelou_id ', ' 8 '); return false;" > Chongqing </a><a class= "City_links" href= "#" onclick= "m.goexpr (' city_eelou_id ', ' 9 '); return false;" > Ningbo </a><a class= "City_links"
href= "#" onclick= "m.goexpr (' city_eelou_id ', ' ten '); return false;" > Chengdu </a><a class= "City_links" href= "#" onclick= "m.goexpr (' city_eelou_id ', ' one '); return false;" > Qingdao </a><a
class= "City_links" href= "#" onclick= "m.goexpr (' city_eelou_id ', ' n '); return false;" > Nanjing </a><a class= "City_links" href= "#" onclick= "m.goexpr (' city_eelou_id ', '"); return false; " > Kunming
</a><a class= "City_links" href= "#" onclick= "m.goexpr (' city_eelou_id ', ' + '); return false;" > Wuhan </a><a class= "City_links" href= "#" onclick= "m.goexpr (' city_eelou_id ', '"); return false; " > Days
Jin </a><a class= "City_links" href= "#" onclick= "m.goexpr (' city_eelou_id ', ' + '); return false;" > Hefei </a><a class= "City_links" href= "#" onclick= "m.goexpr (' city_eelou_id ', ' n '); return false;" >
Zhengzhou </a><a class= "City_links" href= "#" onclick= "m.goexpr (' city_eelou_id ', '"); return false; " > Shenyang </a><a class= "City_links" href= "#" onclick= "m.goexpr (' city_eelou_id ', ' n '); return
false; " > Dalian </a><a class= "City_links" href= "#" onclick= "m.goexpr (' city_eelou_id ', '"); return false; " > Fuzhou </a><a class= "City_links" href= "#" onclick= "m.goexpr
(' city_eelou_id ', ' + '); return false; " > Suzhou </a><span class= "City_links" >
</span><span class= "city_links" ></span><span class= "City_links" ></span>
</div>
</div>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
</body>
Pure CSS popup layer, city switching effect
