<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead><title>css navigation </TITLE> <meta Content= "text/html; charset=gb2312 "http-equiv=content-type> <style type=" Text/css "> <!--body {font:12px/1.6em Tahoma,Verda Na margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; line-height:16.8px; } #nav {z-index:500; padding-bottom:0px; List-style-type:none; margin:0px; padding-left:0px; padding-right:0px; height:27px; List-style-image:none; padding-top:0px} #nav li.top {display:block; Float:left; height:27px; #nav LI A.top_link {padding-bottom:0px; line-height:27px; padding-left:0px; padding-right:0px; Display:block; Float:left; height:27px; font-size:12px; Cursor:pointer; Font-weight:bold; Text-decoration:none; padding-top:0px} #nav LI a.top_link SPAN {PADDING-bottom:0px; width:80px; Display:block; Text-align:center; Float:left; height:27px; padding-top:0px} #nav LI a.top_link span.down {padding-bottom:0px; width:80px; Display:block; Text-align:center; Background:url (/upload/201011/20101102232944735.gif) No-repeat right; Float:left; height:27px; padding-top:0px} #nav li:hover a.top_link {background-color: #548bcf; color: #fff2ee; #nav li:hover a.top_link SPAN {background-color: #548bcf; color: #fff2ee; } #nav li:hover A.top_link span.down {background-color: #548bcf; color: #fff2ee; Background:url (/upload/201011/20101102232944294.gif) No-repeat right; } #nav li:hover {z-index:200; position:relative} #nav li:hover ul.sub {z-index:270; Border-bottom: #ddd 1px solid; Border-left: #ddd 1px solid; padding-bottom:0px; padding-left:0px; width:150px; padding-right:0px; White-space:nowrap; BACKGROUND: #e1ecf6; Height:auto; Border-top: #ddd 1px solid; top:27px; Border-right: #ddd 1px solid; padding-top:0pX LEFT:1PX} #nav li:hover ul.sub LI {position:relative; width:150px; Display:block; Float:left; height:19px; Font-weight:normal} #nav li:hover ul.sub LI A {border-bottom:0px; border-left:0px; line-height:19px; text-indent:5px; width:150px; Display:block; height:19px; COLOR: #000; font-size:12px; border-top:0px; border-right:0px; Text-decoration:none} #nav li ul.sub li a.fly {background:url (/upload/201011/20101102232944264.gif) #e1ecf6 No-repe At left center} #nav li:hover ul.sub LI a:hover {background:url (/upload/201011/20101102232944198.gif) #548bcf repeat -X Center Center; COLOR: #fff; } #nav li:hover ul.sub LI a.fly:hover {background:url (/upload/201011/20101102232944875.gif) #548bcf No-repeat left Cen ter COLOR: #fff} #nav li:hover li:hover UL {z-index:400; Border-bottom: #ddd 1px solid; Border-left: #ddd 1px solid; padding-bottom:0px; padding-left:0px; width:150px; padding-right:0px; White-space:nowrap; BACKGROUND: #e1ecf6; HEIGht:auto; Border-top: #ddd 1px solid; Top: -1px; Border-right: #ddd 1px solid; padding-top:0px; LEFT:144PX} #nav li:hover li:hover li:hover UL {z-index:400; Border-bottom: #ddd 1px solid; Border-left: #ddd 1px solid; padding-bottom:0px; padding-left:0px; width:150px; padding-right:0px; White-space:nowrap; BACKGROUND: #e1ecf6; Height:auto; Border-top: #ddd 1px solid; Top: -1px; Border-right: #ddd 1px solid; padding-top:0px; LEFT:144PX} #nav li:hover li:hover li:hover li:hover UL {z-index:400; Border-bottom: #ddd 1px solid; Border-left: #ddd 1px solid; padding-bottom:0px; padding-left:0px; width:150px; padding-right:0px; White-space:nowrap; BACKGROUND: #e1ecf6; Height:auto; Border-top: #ddd 1px solid; Top: -1px; Border-right: #ddd 1px solid; padding-top:0px; LEFT:144PX} #nav li:hover li:hover li:hover li:hover li:hover UL {z-index:400; Border-bottom: #ddd 1px solid; Border-left: #ddd 1px solid; padding-bottom:0px; padding-left:0px; width:150px; PADding-right:0px; White-space:nowrap; BACKGROUND: #e1ecf6; Height:auto; Border-top: #ddd 1px solid; Top: -1px; Border-right: #ddd 1px solid; padding-top:0px; LEFT:144PX} #nav UL {position:absolute; padding-bottom:0px; List-style-type:none; margin:0px; padding-left:0px; width:0px; padding-right:0px; height:0px; Top: -9999px; List-style-image:none; padding-top:0px; Left: -9999px} #nav Li:hover ul ul {position:absolute; padding-bottom:0px; List-style-type:none; margin:0px; padding-left:0px; width:0px; padding-right:0px; height:0px; Top: -9999px; List-style-image:none; padding-top:0px; Left: -9999px} #nav li:hover Li:hover ul ul Position:absolute; padding-bottom:0px; List-style-type:none; margin:0px; padding-left:0px; width:0px; padding-right:0px; height:0px; Top: -9999px; List-style-image:none; padding-top:0px; Left: -9999px} #nav li:hover Li:hover Li:hover ul ul {position:absolute; padding-bottom:0px; List-style-type:none; MARGIN:0px; padding-left:0px; width:0px; padding-right:0px; height:0px; Top: -9999px; List-style-image:none; padding-top:0px; Left: -9999px} #nav li:hover li:hover li:hover Li:hover ul ul {position:absolute; padding-bottom:0px; List-style-type:none; margin:0px; padding-left:0px; width:0px; padding-right:0px; height:0px; Top: -9999px; List-style-image:none; padding-top:0px; Left: -9999px} #nav li:hover li:hover a.fly {border-bottom-color: #fff; Border-top-color: #fff; Background:url (/upload/201011/20101102232944875.gif) #548bcf No-repeat left center; COLOR: #fff; Border-right-color: #fff; Border-left-color: #fff; } #nav li:hover li:hover li:hover a.fly {border-bottom-color: #fff; Border-top-color: #fff; Background:url (/upload/201011/20101102232944875.gif) #548bcf No-repeat left center; COLOR: #fff; Border-right-color: #fff; Border-left-color: #fff; } #nav li:hover li:hover li:hover li:hover a.fly {border-bottom-color: #fff; Border-top-color: #fff; BACKGROUND: URL (/upload/201011/20101102232944875.gif) #548bcf No-repeat left center; COLOR: #fff; Border-right-color: #fff; Border-left-color: #fff; } #nav li:hover li:hover li:hover li:hover li:hover a.fly {border-bottom-color: #fff; Border-top-color: #fff; Background:url (/upload/201011/20101102232944875.gif) #548bcf No-repeat left center; COLOR: #fff; Border-right-color: #fff; Border-left-color: #fff; #nav li:hover li:hover LI a.fly {border-bottom-color: #e1ecf6; Border-top-color: #e1ecf6; Background:url (/upload/201011/20101102232944264.gif) #e1ecf6 No-repeat left center; COLOR: #000; Border-right-color: #e1ecf6; Border-left-color: #e1ecf6} #nav li:hover li:hover li:hover LI a.fly {border-bottom-color: #e1ecf6; Border-top-color: #e1ecf6; Background:url (/upload/201011/20101102232944264.gif) #e1ecf6 No-repeat left center; COLOR: #000; Border-right-color: #e1ecf6; Border-left-color: #e1ecf6} #nav li:hover li:hover li:hover li:hover LI a.fly {border-bottom-color: #e1ecf6; BORder-top-color: #e1ecf6; Background:url (/upload/201011/20101102232944264.gif) #e1ecf6 No-repeat left center; COLOR: #000; Border-right-color: #e1ecf6; Border-left-color: #e1ecf6}--> </style> </HEAD> <BODY> <ul id=nav> <li class=top> ;<span> Home </SPAN></LI> <li class=top><a id=products class=top_link href= "#" ><span Class=down> about Us </SPAN></A> <ul class=sub> <LI> Company Profile </LI> <LI> Chairman & President </ li> <LI> Development </LI> <LI> Company honors </LI></UL></LI> <li Class=top><a id= Services Class=top_link href= "#" ><span class=down> products & Services </SPAN></A> <ul class=sub> <LI> Products 1 <UL> <LI> matching </LI> <LI> accessories </LI></UL></LI> <LI> Product 2 <ul > <LI> Products 2-1</li> <LI> products 2-2</li></ul></li> <LI> service <UL> <LI> Service 111</li> <lI> Service 112</li> <LI> service 113</li> <LI> service 114</li> <LI> service 115</li></ul> </LI></UL></LI> <li Class=top><span class=down> News Center </SPAN> <ul class=sub> <LI> Announcements </LI> <LI> Industry news </LI></UL></LI> <li Class=top><a id=hr class=top_ Link href= "#" ><span class=down> hr </SPAN></A> <ul class=sub> <LI> talent Strategy </LI> & Lt li> Social Recruitment </LI> <LI> Company benefits </LI></UL></LI> <li Class=top><span class=down> Partner </SPAN> <ul class=sub> <LI> partner 1</li> <LI> partner 2</li> <LI> partner 3</li> </UL></LI> <li class=top><span> Contact Us </SPAN></LI></UL> </body></ Html>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
